Highlight Wordpress Category when on a Single Post: Tutorial

While making the redesign for this blog I wanted to highlight the category in the navigation when browsing the specified category as well as keeping it highlighted when on the a single post added to that category ( you’ll notice that the navigation is highlighted if your on this page ).

I searched high and low and eventually found a simple plug-in, by adding a small piece of code to the plug-in I could achieve this, follow the steps below and you should beable to get your categories highlighted too when on a single post.

What we want to Achieve:

Add a Home page link to the navigation and highlight current page.

Highlight the current category

Highlight the current category even when on single post

Step 1: Download The Plug-in

Download the plug-in: Here (zip) From: Screenshine

Step 2: Uploading and Editing the Plug-in

1. Upload the plug-in to your Wordpress plug-ins folder.

2. Go to your Wordpress admin panel “Plugins” and “Activate” the plug-in

3. Look at your “Currently Active plugins” and click “Edit” for the “Show Active Category plugin”

4. Scroll down past the copyright information until you find this line of code

if( is_single()) {

change that line of code to look like this

if( is_single() || is_category() ) {

Click “Update file” to save the changes

Step 3: CSS for Highlighting Current Category

Go to your theme CSS file normally called “style.css” and add this line of code below.

.active_category{background-color:#66FF00;}

NOTE: you can style this how you want it will style the current category and the category when on a single post using the plug-in.

Step 4: CSS for Highlighting Current Page

To highlight your “pages” all you have to do is add this line of code to your CSS file, This css class is actually built in to Wordpress

.current_page_item{background-color:#66FF00;}

NOTE: you can style this how you want it will style the current page

Step 5: Add a Home Page Link

You can have a home page link in your navigation take a look at what i have, This hard codes a “Home” link in to your navigation and adds the class “current_page_item” when on your index page, this is styled with css as in Step 4

<div id="nav">
<ul>
<li <?php if (is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('url'); ?>/">Home</a></li>
</ul>
</div>

All Code For The Navigation

So this is a summary of what we’ve done, if you’ve uploaded the plug-in, activated it and edited the code, you can test the code below, copy and paste

Put this in your style.css

.active_category{background-color:#66FF00;}
.current_page_item{background-color:#66FF00;}

Put this in your header.php

<div id="nav">
<ul>
<li <?php if (is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('url'); ?>/">Home</a></li>
<p><?php wp_list_pages('title_li='); ?><?php wp_list_cats('sort_column=name'); ?>
</ul>
</div>

All this code adds the home page link, all your pages and then all your categories to your navigation, if you’ve added the CSS styles to you Style sheet these things should be highlighted when on the current page, category and single category post.

Questions

So hopefully you’ll find this useful, let me know if you get it working or get stuck in the comments below ill try my best to help you but obviously i cant help you with the plug-in as I did not make it.

Author of this post: Max Stanworth

Iam the creator and editor of Design Shard, I created this blog to post my inspirations, work and free resources that I hope others find interesting too. See all posts by: Max Stanworth

50 Comments (Leave a Comment)

Steven Gun

November 6, 2009

Didnt know there was a plugin for that. Thanks!
Right now I am creating a tutorial for dynamic menus without plugins.
This way people can choose plugin vs. no plugin
Steven Gun´s last blog ..New Google Adsense Interface
Reply
seo specialist chennai

November 3, 2009

very useful article for me , thanks
Reply
Coder40

October 22, 2009

An analogy might be sought in the working of a large manufacturing plant in a factory. ,
Reply
Jill

August 10, 2009

I think I’ll give it a try
Jill´s last blog ..Wurm befällt Twitter
Reply
Seven Jeans

August 7, 2009

Hi,
Can you please post a blog abut changing the header? This post is absolutely fine.
Reply
Andy

July 14, 2009

Has anyone figured out a way to tweak this so the the PARENT category of the active post is highlighted? Thanks in advance..

Andy´s latest blog post..Rewind: 100 Eyes Interview with Amro Hamzawi
Reply
Oliver

July 4, 2009

I think there is some code missing from this page – I got to step 5 then it all went out the window. I understand the css styling – but what is the php call that I need to put into the page in order to have the class written into the code of the post page when it is rendered?
Reply
Russell Bishop

June 1, 2009

Fair enough, thanks for getting back to me! I did just style the a in the end, it was just to keep all my styling the same :)

No problem though, thanks very much!
Reply
Design Shard

May 29, 2009

@Russel – you should have a class current-cat on the li ? you may not need the plugin, check your source code when on a category page etc, you may want to ask at http://wordpress.org/support/ the support forums , as i wont have time to look in to this at the moment, sorry.
Reply
Russell Bishop

May 29, 2009

Just to bump this topic up to the author, how can I add the class to the li instead of the a?
Reply
Russell Bishop

May 21, 2009

How can I add the class to the li instead of the a?
Reply
ed

March 31, 2009

Fantastic, very useful, thanks a lot
Reply
Counter Strike hack downloads

March 23, 2009

Hey, this is a great post. Now I know how to optimize my site. Thanks for sharing how to find dofollow blogs! :D Greatly appreciated. In return, if you need any assistance in article submission, let me know! I do not want to spam my url here, so contact me personal at my personal email: josephwhenry@gmail.com
Reply
Josie

March 16, 2009

kmedia, can you figure out a way to share your solution? I’m trying to do this in Wordpress 2.7 and it’s killing me too…
Reply
yugu

February 26, 2009

Thanks,
i’m in the middle of redesigning my site and this article helped me in the menu design
Reply
kmedia

February 9, 2009

Sorry.. the code was stripped from my post.. I thought [sourcecode language='css'] would keep it. :/
Reply