WordPress Category Navigation

One of the basic features of most websites is some type of navigation indicator to identify what page you are currently browsing. Although this can take the form of a fairly complicated breadcrumb indicator, the most frequent implementation of this feature is simply to draw attention to the navigation link by highlighting it differently with your CSS file.

Don’t you think it’s time to extend this same feature to the WordPress category navigation links? Read on to find out how!

The Typical WordPress Theme Navigation Structure

Most websites that use WordPress for the backend have a sidebar or other area of the site which displays a series of navigation links for each of the blog categories. This link list is displayed by use of the wp_list_categories() function. When the visitor chooses one of these links, they are taken to an archive of blog posts that have been tagged under a particular category. Most blogs have quite a few category assignments, and as a rule these category links make up a significant portion of the overall navigation.

An example of this can be seen right here at 1955 Design. Follow this link to articles written in my portfolio category. Notice that in the right sidebar, under the Categories tab, you will see that the title for this category is now colored a shade of orange and is italicized as well. Neat feature, at least to me.

How to Highlight the Category Navigation Link

Wouldn’t it be nice if the rather lengthy list of category navigation links could be highlighted so that the visitor can see that they are visting a category archive and are not on the main blog index or a static blog Page? It can be done!. WordPress adds the CSS class named current-cat to the list markup which surrounds the active category link. By controlling the styling of that class in your CSS file, it is possible to visually indicate to your site visitor that they are currently browsing a category archive.

Here’s my CSS:

#sidebar ul.li_smaller li.current-cat a {
	padding:0px 5px 0px 0;
	font-variant:normal;
	background-image:url(i/nav_current.jpg);
	background-repeat:no-repeat;
	background-position:left center;
	background-color:#5B5C9D;
}

The image shown at the top of this post indicates how 1955 Design implements this feature. As you can see, the current category link takes on a different background color to serve as an indicator to the visitor. If you actually scroll down the left sidebar and choose the Accessiblity category link, you will see how this indicator actually changes that link to the highlighted color when you are viewing the Accessiblity category archive list.

Is this the Eighth Wonder of the World?

Hardly. It’s just one in a series of WordPress enhancements that I have learned of recently. I think it’s a neat feature that is very often overlooked by theme developers. In fact, of the thousands of WordPress blogs that I have visited, I have only seen this feature implemented one time – by Mike Cherim over at GreenMethods.com. I discovered this WordPress feature while studying Mike’s new webiste. As usual, Mike is on the cutting edge of WordPress design. Thanks Mike!