Web Design Articles

Building the theme for this blog was my first ever Wordpress customisation, in fact, I’d never used a CMS before!

So when it came to understanding how best to display my categories, I got in a pickle!

I made the mistake of trying to link internally to the folders, but of course, the links would break when selected from within a category, or a single post, sending me to destinations such as ‘/category/articles/category/articles‘.

Upon inspecting some of those free downloadable templates, I found that to list your categories, you use the snippet;

<?php wp_list_categories('show_count=0&title_li='); ?>

This was a very useful start, as it not only lists my categories in neat list items, but it also automatically adds the class ‘current-cat’ to the current category.

So with this in place, I could write some css for styling my active link. But just listing the categories wasn’t doing the trick, because Wordpress doesn’t treat your home page as a category! So I ventured onto google and found what I was looking for;

<?php echo get_option('home'); ?>

Now although this functions the same as the wp-list-categories, it doesn’t put the link in a list item for you, so remember to put your <li> tags around the code;

<li><?php echo get_option('home'); ?></li>

But we’re missing something!

This snippet won’t add the ‘current-cat‘ class to our Home link when it’s active! Terror!

So I ventured further and further into the Google archives, and after many failed tutorials and advice topics, I came across a winner!

<li class="<?php if (is_home()){echo 'current-cat';}?>"><a href="<?php bloginfo('url'); ?>/">Home</a></li>

This code manually checks if the Home page is current, and if so, adds the class ‘current-cat’. Success!

But what if like me, you’d like to highlight the current category from within a single post? You’re not the only one!

Here is the download link for a great plugin, aptly named ‘Show Active Category (while browsing a post)‘. The plugin adds the CSS class “active_category” to all categories the active post belongs to. Keep in mind that the active_category class is added to the <a> link, not the <li>.

Now just make sure that your CSS includes these classes;

ul li.current-cat { color: #ff0000; }
ul li a.active-category { color: #ff0000; }

I hope I’ve been able to help you with your category highlights, and I wish you the best of luck! Any problems you have with the code, leave a comment!