In this two-part article by Jean Baptiste-Jung, we shall learn how to enhance user experience and make your blog a better place for the visitors. In the first part we saw how to use paginator, highlight searched text in search results, and use the CSS sliding doors technique within WordPress.

In this part, you will learn:

• Creating a drop-down menu for your categories
• Adding a breadcrumb to your theme
• Displaying related posts
• Displaying tabs on your sidebar

Creating a drop-down menu for your categories

Do you use a lot of categories along with their sub-categories? If so, using a drop-down menu is a nice way to categorize content, especially on larger sites. However, giving a quick access to the categories or sub-categories to readers can become a pain.

Over the years, the drop-down menu has become very popular on the Internet. In this recipe, I'm going to show you how to create your own drop-down menu for your WordPress blog categories.

Getting ready

The menu you are going to create will first list your pages, and then at last a tab called Categories will obviously list your categories.

This menu is achieved only with XHTML and CSS. No JavaScript is needed (unless you want to maintain compatibility with it commonly referred to as IE6) to ensure the best SEO possible for your WordPress blog.

How to do it

In order to make this recipe more readable, I have divided it in 3 steps—the PHP and the HTML, the CSS, and the JavaScript for IE6 compatibility.

Step 1: PHP and HTML

Open the header.php file from your theme and paste the following code where you'd like your drop-down menu to be displayed:

<ul id="nav" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/"
class="on">Home</a></li>
<?php wp_list_pages('title_li='); ?>
<li class="cat-item"><a href="#">Categories</a>
<ul class="children">
<?php wp_list_categories('orderby=name&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>
</li>
</ul>

The purpose of this code is to make a list of all our pages and subpages, as well as a last list element named Categories. When a reader hovers on one of the top-level menu, the subpages (or categories) are displayed.

Step 2: The CSS

Open the style.css file from your theme and paste the following styles:

#nav{
background:#222;
font-size:1.1em;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav a, #nav a:hover {
display: block;
text-decoration: none;
border:none;
}
#nav li {
float: left;
list-style:none;
border-right:1px solid #a9a9a9;
}
#nav a, #nav a:visited {
display:block;
font-weight:bold;
color: #f5f5f4;
padding:6px 12px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
background:#000;
text-decoration:none
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 174px;
border-bottom: 1px solid #a9a9a9;
}
#nav li li {
width: 172px;
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: #777;
}
#nav li li a, #nav li li a:visited {
font-weight:normal;
font-size:0.9em;
color:#FFF;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav 
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
a.main:hover {
background:none;
}

You may have to tweak this code a bit to match up to your blog's look and feel, for example, by adjusting colors. Once you are finished, simply save the file.

Step 3: Optional JavaScript

I'm not going to teach you something new here since, Internet Explorer 6 is a totally obsolete, crappy, and buggy browser. Sadly, many peoples are still using it and you may want to make sure that your blog is IE6 compliant.

Modern browsers as such as Safari, Firefox, Opera, and even Internet Explorer 7 will not have any problem with the :hover pseudo-class on li elements. But you guessed it, it is asking too much from the IE6.

1. To ensure backward compatibility on your WordPress blog, create a new file and call it dropdown.js.
2. Put this code in the dropdown.js file:

   <![CDATA[//><!--
   sfHover = function() {
   var sfEls = document.getElementById("nav").
   getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
   sfEls[i].onmouseover=function() {
   this.className+=" sfhover";
   }
   sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new
   RegExp(" sfhoverb"), "");
   }
   }
   }
   if (window.attachEvent) window.attachEvent("onload", sfHover);
   //–><!]]>
   

3. Save the dropdown.js file and upload it to your wp-content/themes/yourtheme directory.
4. Open header.php and add the following line within the <head> and </head> HTML tags:

   <!--[if lte IE 6]>
   <script type="text/javascript" src="<?php bloginfo(
   'template_url');?>/dropdown.js"></script>
   <![endif]-->
   

That's all! Your blog now has a very professional looking drop-down menu.

How it works

As IE6 cannot deal with :hover pseudo-classes on <li> elements, this small piece of code automatically ads a new CSS class, named sfhover to <li> elements when they are hovered over. When the mouse goes out of the top level element, a new function is executed, using a regular expression to remove the sfhover class.

There's more...

Now that I have shown you're the principle of creating a drop-down menu, you can use what you have just learned to create various kinds of menus. As an example, let's see how to re-use the previous code and create a very nice horizontal drop-down menu.

Creating a horizontal drop-down menu

As you'll notice by observing the code, there's a lot of similar things between this code and the one that you saw earlier.

Part 1: PHP and HTML

Simply copy this code where you want the menu to be displayed, for example, in your header.php file:

<ul id="nav2" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/"
class="on">Home</a></li>
<?php wp_list_categories('orderby=name&exlude=181&title_li=');
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != "") {
echo "<ul>";
wp_list_categories('orderby=id&show_count=0&title_li=
&use_desc_for_title=1&child_of='.$this_category->cat_ID);
echo "</ul>";
}
?>
</ul>

Part 2: The CSS

In modern drop-down menus, CSS are a very important part. Indeed, in this example it is CSS that display our menus horizontally.

Paste the following code in your style.css file:

#nav2{
background-color: #202020;
display: block;
font-size:1.1em;
height:50px;
width:100%;
}
#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}
#nav2 a ,#nav2 a:hover{
border:none;
display: block;
text-decoration: none;
}
#nav2 li {
float: left;
list-style:none;
}
#nav2 a,#nav2 a:visited {
color:#109dd0;
display:block;
font-weight:bold;
padding:6px 12px;
}
#nav2 a:hover, #nav2 a:active {
color:#fff;
text-decoration:none
}
#nav2 li ul {
border-bottom: 1px solid #a9a9a9;
height: auto;
left: -999em;
position: absolute;
width: 900px;
z-index:999;
}
#nav2 li li {
width: auto;
}
#nav2 li li a,#nav2 li li a:visited {
color:#109dd0;
font-weight:normal;
font-size:0.9em;
}
#nav2 li li a:hover,#nav2 li li a:active {
color:#fff;
}
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul,
#nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.
sfhover ul {
left: 30px;
}

Once you have added theses lines to your style.css file and saved it, your WordPress blog will feature a very cool horizontal menu for displaying your categories.

Part 3: (Optional) JavaScript

As usual, if you want to maintain backward compatibility with Internet Explorer 6, you'll have to use the Javascript code that you have already seen in the previous example.

100 simple but incredibly useful recipes to take control of your WordPress blog layout, themes, widgets, plug-ins, security, and SEO Take your WordPress blog to the next level with solutions to common WordPress problems that make your blog better, smarter, faster, and more secure Enhance your SEO and make more money online by applying simple hacks Fully tested and compatible with WordPress 2.7 Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible  http://www.packtpub.com/wordpress-2-7-cookbook/book

Adding a breadcrumb to your theme

When you're looking for a way to improve your blog's usability, a breadcrumb is definitely an option to consider.

According to Wikipedia,

Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. Generally, a greater than (>) is used as hierarchy separator, although other glyphs can be used to represent this.

Getting ready

There are many different solutions available in order to implement a breadcrumb on your WordPress blog, such as hacks and plugins. In this recipe, I'm going to show you how to use the Yoast Breadcrumb plugin, that in my opinion, is the best solution available. But don't worry if you're a hack fanatic, or if you're just curious to know about how breadcrumbs work; I'll also be explaining how to create a breadcrumb without using a plugin.

How to do it

Using Yoast Breadcrumbs is definitely easy. Follow these simple steps to install and configure it on your own blog:

1. Go to http://yoast.com/wordpress/breadcrumbs/ and download the plugin. In this example, I have used the 0.7.4 version of the plugin.
2. Follow the standard plugin installation procedure, as described in Chapter 4, to install and activate the Yoast Breadcrumb plugin.
3. Once the plugin is activated, you have to insert a code snippet on your blog. Open the files where you want your Breadcrumb to appear (in my opinion, it is a good thing to enable the breadcrumb at least in single.php, page.php, search.php; but you can also enable it in some custom pages that you may have on your blog, such as your archive page or author pages).
4. Paste the following code where you want the breadcrumb to be displayed:

   <?php if ( function_exists('yoast_breadcrumb') ) {
   yoast_breadcrumb('<p id="breadcrumbs">','</p>');
   } ?>
   

5. Save the files and visit your blog. Breadcrumbs are now displayed. Looks very nice, doesn't it? Note that if you want to style your breadcrumb with CSS, you can do so by using the p#breadcrumb ID.

The Yoast Breadcrumb plugin allows you to print your breadcrumb directly on your blog page or post. You may also want to get the result only as a PHP variable for further tweaking.

Getting the breadcrumb as a PHP variable

The following code will create a $breadcrumb variable that will contain your breadcrumb:

<?php if ( function_exists('yoast_breadcrumb') ) {
$breadcrumbs = yoast_breadcrumb("","",false);
} ?>

How it works

The Yoast Breadcrumb plugin takes three arguments. Let's see in detail what these are:

• $prefix: The code that your breadcrumb should be prefixed with. Defaults to an empty string.
• $suffix: The code that should be added on the back of your breadcrumb. Defaults to an empty string.
• $display: If set to false, will return the breadcrumb path instead of echoing it. Defaults to true.

The Yoast Breadcrumbs plugin works by getting information from your blog, such as the post (or page) name, the category where the post belongs to, and the blog homepage URL. This can be seen in the following example:

Home > Category name > Sub-Category name (if any) > Post name

The Yoast Breadcrumbs plugin will then dynamically create a clickable breadcrumb, which allows visitors to click on any of the links to go on to the selected section of your blog.

For example, if a visitor clicks on the Category name link in the above Breadcrumb, he or she will be redirected to that category page. Clicking on Home will lead him or her to your blog homepage.

There's more...

As we have already discussed, it can sometimes be better to use a hack instead of a plugin. Now that we saw how to easily add a breadcrumb to your WordPress blog by using the excellent "Yoast breadcrumbs" plugin by Joost de Valk, let's see how we can create a breadcrumb on our own.

Using a hack to display breadcrumbs

One more time, WordPress conditional tags will be very useful. With them, we'll be able to know easily if the page displayed by a visitor is an article, a page, or a category archive.

Then, we'll have to use the right functions to show the site's hierarchy. Nothing difficult here, WordPress has all of the functions that we need to get links to the homepage, articles, and single pages.

Simply paste this code in the functions.php file of your theme:

function the_breadcrumb() {
if (!is_home()) {
echo '<a href="';
echo get_option('home');
echo '">';
bloginfo('name');
echo "</a> » ";
if (is_category() || is_single()) {
the_category('title_li=');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}

Now, when you'll want to display breadcrumbs, simply use the_breadcrumb() function:

<?php the_breadcrumb(); ?>

Displaying related posts

Guess what your readers will do when they finish reading one of your posts? 90% of them simply leave without even trying to see if you have any interesting related articles. It is a well known fact that the typical Internet user doesn't spend a lot of time on a web site: however, a few tips can increase your chance to have longer visits and maybe new RSS subscriptions. One of them is to display related posts at the end of your articles.

Getting ready

The easiest way to display related posts on your WordPress blog is to use the "WordPress Related Posts" plugin (Version 1.0). This plugin is compatible with WordPress 2.3 and later versions. You can use it with any theme.

How to do it

To display related posts, follow these simple steps:

1. Get your copy of the "WordPress Related Posts" at the following URL http://wordpress.org/extend/plugins/wordpress-23-related-posts-plugin/.
2. Install the plugin by following the standard plugin installation procedure.
3. Once the plugin is installed successfully, login to your WordPress dashboard and go to Settings | WordPress Related Posts to configure the plugin.



Available options are:

1. Related Posts Title: Enter Related posts or any other title in this tab
2. No Related Posts, Display: What to display if no related posts are found
3. No Related Post's Title or Text: Text to be displayed if no related posts are found
4. Limit: Limit of posts to be displayed simultaneously
5. Exclude (category IDs): Categories to be excluded
6. Other Setting:
   • Auto Insert Related Posts: Automatic insertion of related posts
   • Related Posts for RSS feeds: Display related posts in your RSS feed
   • Display Comments Count: Display the number of comments
   • Display Posts Date: Display the date of the posts
4. After you have configured the plugin to work the way you want, simply open your single.php file and insert the following line of code where you want your related posts to be displayed:

   <?php wp_related_posts(); ?>
   

How it works

The "WordPress Related Posts" plugin executes some SQL queries based on tags. For example, if you tag a post with the cats tag and have two other posts tagged with cats, you can be sure that these two posts will be shown as related in the first post.

If the plugin doesn't seem to work properly, the first thing to check would be to make sure that your posts are tagged.

Display tabs on your sidebar

There are a lot of things that you can add in your blog sidebar such as Blogroll, Feedburner suscribers, categories, 125*125 pixels ads, and more. The problem is, your sidebar becomes quite lengthy which isn't visually appealing. And to make it worse, not too many people will scroll down your blog to see what is available at the very bottom of your sidebar.

Getting ready

You can create a tabbed sidebar by using some custom HTML, CSS, and JavaScript codes. But the easiest solution is to use the "Fun With Sidebar Tabs" plugin, by Andrew Rickmann. The latest version of the plugin is 0.5.4. The plugin author has stopped maintaining it, but the plugin has been tested for its compatibility with WordPress versions up to 2.8. So, there's no particular reason that the plugin will stop working properly for higher versions, but there's no guarantee either.

How to do it

The "Fun With Sidebar Tabs" plugin can be installed easily. Just follow these steps to get started.

1. Go to http://wordpress.org/extend/plugins/fun-with-sidebar-tabs/ and download your copy of the plugin.
2. Install it on your blog by following the standard plugin installation procedure.
3. Once the plugin is installed and activated, go to Appearance | Widgets on your WordPress dashboard. You can then use either the Fun with Sidebars widget (by adding each Tabbed Sidebar widget into your main sidebar) or you can simply insert the following tag anywhere in your theme files:

   <?php the_tabbed_sidebar(1); ?>
   

How it works

The "Fun With Sidebar Tabs" plugin adds a new widget-ready sidebar which displays the widgets in it as tabs, instead of a list. It adds a widget and a template tag, so that it can be inserted wherever it needs to be.

Summary

We have learned how to enhance the user experience in a WordPress blog. We have created and added a few very helpful features into our WordPress blog.

In this article, we have learned:

• Creating a dropdown menu for your categories
• Adding a breadcrumb to your theme
• Displaying related posts
• Display tabs on your sidebar

If you have read this article you may be interested to view :

• Enhancing User Experience with WordPress 2.7(Part 1)
• Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 1)
• Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 2)

100 simple but incredibly useful recipes to take control of your WordPress blog layout, themes, widgets, plug-ins, security, and SEO Take your WordPress blog to the next level with solutions to common WordPress problems that make your blog better, smarter, faster, and more secure Enhance your SEO and make more money online by applying simple hacks Fully tested and compatible with WordPress 2.7 Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible  http://www.packtpub.com/wordpress-2-7-cookbook/book

About the Author

Jean-Baptiste Jung is a Web developer, Web designer, and blogger born in Paris, France and now living in Wallonia (French-speaking part of Belgium) with his wife and cat.

Jean unearthed the World Wide Web in 1998 and started creating web sites three years later. In 2006, while working as a freelance Web developer for a well known French TV channel, Jean started to work with blogs and WordPress. A few months later, he created his first blog.

He became immensely passionate about WordPress and launched a blog dedicated to WordPress hacks, http://www.wprecipes.com, which quickly managed to become one of the most popular WP-related web sites over the Internet. Meanwhile, Jean is also an author on some prestigious blogs, such as WpHacks, ProBlogDesign, and Smashing Magazine.