SEOAdsenseThemes.com » How-To http://www.seoadsensethemes.com Search Engine Optimized (SEO), Adsense-Ready Free WordPress Themes Wed, 25 Aug 2010 06:11:27 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 WordPress Multi-Level Drop Down menu using jQuery http://www.seoadsensethemes.com/wordpress-multi-level-drop-down-menu-using-jquery/ http://www.seoadsensethemes.com/wordpress-multi-level-drop-down-menu-using-jquery/#comments Sat, 09 Aug 2008 14:53:28 +0000 Stanley http://www.seoadsensethemes.com/?p=23 WordPress jQuery Multi-Level Drop-Down Menu
Click here to view demo

As WordPress theme designers, we’re often faced between the choice of going for purely CSS drop-down menu or javascript drop-down menus in our struggle with cross-browser compatibility.

The aim of this short tutorial is help you build a simple multi-level drop-down menu in your WordPress theme using jQuery’s JavaScript library to ensure cross-browser compatibility.

When I first started to design WordPress themes, I went the pure-CSS way. I found a variety of cross-browser CSS-only drop-down menus at Stu Nicholls CSS Play and implemented his solutions into my themes. Some people do not like the way Stu hacked CSS to ensure cross-browser compatibility. It may be ugly but it works. And you can’t really use WordPress wp_list_pages() tag with Stu Nicholl’s CSS because the tag’s parameters could not reproduce the CSS hacks needed to make it work.

Later on, as I started to embrace more JavaScript in my WordPress themes, I decided to built my drop-down menu with a bit of jQuery Javascript help. It saved a lot of effort. No more unnecessary CSS hacks. Plays nice with WordPress wp_list_pages() tag. And WordPress installation already comes with jQuery library included. This is one of the main reasons why I chose jQuery among other Javascript libraries.

Anyway, I’m not here to convince you to use JavaScript for your WordPress drop-down menus. To those of you who are would like to use jQuery for your multi-level WordPress drop-down menu, I hope you’ll find the short tutorial below helpful.

Add this bit of JavaScript between the <head></head> HTML tags in your WordPress theme’s header.php (thanks to kriesi.at):

<?php wp_enqueue_script('jquery'); ?>

<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("#dropmenu ul").css({display: "none"}); // Opera Fix
jQuery("#dropmenu li").hover(function(){
jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
},function(){
jQuery(this).find('ul:first').css({visibility: "hidden"});
});
});
</script>

The HTML. We will list the pages using WordPress default wp_list_pages() tag. I used it in header.php of my WordPress theme:

<ul id="dropmenu">
<?php wp_list_pages('sort_column=menu_order&amp;amp;amp;title_li='); ?>
</ul>

Now here’s the CSS:

<style type="text/css">
#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#fff; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 1em; color:#686868; border-right:1px solid #c8c8c8; text-decoration:none; background:#fff;}
#dropmenu a:hover {background:#888; color:#fff;}
#dropmenu li {float:left; position:relative;}
#dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;}
#dropmenu ul a {border-left:1px solid #c8c8c8;}
#dropmenu li ul {border-top:1px solid #c8c8c8; width:14.1em;}
#dropmenu li ul a {width:12em; height:auto; float:left;  border-bottom:1px solid #c8c8c8;}
#dropmenu ul ul {top:auto;}
#dropmenu li ul ul {left:12em; margin:0px 0 0 10px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
</style>

The CSS styling provided is pretty much barebones. You can view another demo of WordPress jQuery Multi-Level Drop-Down Menu in action here.

Need quick results? Then go through our latest <a href=”http://www.testking.com/117-101.htm”>testking 117-101</a> preparation material which includes <a href=”http://www.testking.com/156-215.htm”>testking 156-215</a> dumps and <a href=”http://www.testking.com/1Y0-259.htm”>testking 1Y0-259</a> practice exam so you will pass exam on first try.

Need quick results? Then go through our latest testking 117-101 preparation material which includes testking 156-215 dumps and testking 1Y0-259 practice exam so you will pass exam on first try.

]]> http://www.seoadsensethemes.com/wordpress-multi-level-drop-down-menu-using-jquery/feed/ 95 Putting a ‘New Post’ image label next to WordPress entries posted within the last 24 hours http://www.seoadsensethemes.com/putting-a-new-post-image-label-next-to-entries-wordpress-posted-last-24-hours/ http://www.seoadsensethemes.com/putting-a-new-post-image-label-next-to-entries-wordpress-posted-last-24-hours/#comments Fri, 01 Aug 2008 06:18:06 +0000 Stanley http://www.seoadsensethemes.com/?p=13 New Post Label

… or perhaps entries posted in the last 48 hours? Ever wanted to put a small image label next to your post telling readers “Hey, this post is barely 2 days old. It’s new!”

Of course, putting a new post label is nothing new. But again, this tiny feature does not come with default WordPress. Luckily with just one or two lines of PHP code, you can modify your WordPress theme to label your new entries automatically.

The following code sample shows how you can label your posts with a tiny image ‘new.gif’ if your post is less than 2 days old. Within your latest entries Loop, we’ll put the ‘new.gif’ image label right new to your post title:

...
...
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php if ( (time()-get_the_time('U')) <= (2*86400) ) { ?>
<img class="new_entry_label" src="<?php bloginfo('template_directory'); ?>/images/new.gif" alt="(New Entry)" title="(New Entry)" />
<?php } ?>
...
...

That’s it. Click here to see it in action on one of my WordPress theme demos. Notice how the newer posts’ title are labelled with a new.gif image.

Now for some explanation on the code used …

PHP time() function returns the current time in Unix Epoch format which looks like this:

12217984786

The function get_the_time('U') returns the entry posted time in Unix Epoch format. Now that both current time ( time() ) and entry posted time ( get_the_time(‘U’) ) is in Unix Epoch format, we can easily calculate the time difference by substracting current time with entry posted time;

time()-get_the_time('U')

Finally, we evaluate if the difference is less than 2 days (again converted to Unix Epoch format by multiplying with 86400 ), the condition is true and the tag is executed which puts “new.gif” image label next to your post title.


<?php if ( (time()-get_the_time('U')) <= (2*86400) ) { ?>
	<img class="new_entry_label" src="<?php bloginfo('template_directory'); ?>/images/new.gif" alt="(New Entry)" title="(New Entry)" />
<?php } ?>

If you want to label 7-day old posts as new instead, just change (2*86400) to (7*86400). That’s it.

]]> http://www.seoadsensethemes.com/putting-a-new-post-image-label-next-to-entries-wordpress-posted-last-24-hours/feed/ 8