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.

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

[php]
if( is_single()) {
[/php]

change that line of code to look like this

[php]
if( is_single() || is_category() ) {
[/php]

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.

[css]
.active_category{background-color:#66FF00;}
[/css]

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

[css]
.current_page_item{background-color:#66FF00;}
[/css]

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

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.

I am the creator and editor of Design Shard, I created this blog to post my inspirations, work and free resources. I hope you find them as interesting and useful as I do. By day I am a UX focused product designer.