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 you can also follow me on twitter @designshard. See all posts by: Max Stanworth

70 Comments (Leave a Comment)

Anna

June 29, 2011

Thanks for the plugin. Is it possible to hightlight the text and not the background? does not seem to work.

Best regards Anna
Reply
Hasham Rabbani

@top10hm January 19, 2011

thanks for providing such a nice info it saved lot of my time..i need some help to find out a plugin for my site..if u can visit the site http://www.thechive.com and plz guide me which plugin they r using to display pictures in which only one picture shows up in the post on the page and when u click the heading or the pic new page opens up with multiple pictures..i am new to wordpress and web development thats y not familiar to most of the things..also plz visit my site as well and guide me according to ur experience and talent that what should i do to make my site more good and attract full and interesting. i will really appreciate that http://www.top10hm.com
thanks in advance and waiting for the reply
Reply
Bahawalpur

January 17, 2011

Thanks for the code. Can I use it for the sidebar menu too.
Reply
Simeon

@simeon_P November 22, 2010

Not working in WP 3.0. Also trying to get other sub-cats to display. Any word?
Reply
Claudia

@wplatte October 8, 2010

Nice tutorial…Thanks for sharing with us!
Claudia´s last [type] ..20 Amazing One-Page Premium WordPress Themes
Reply
Alex Pablate

September 11, 2010

Very nice info, keep it up!

I am very fond of this stuff, and keep looking for that!

Not only this post, but other pages of this site were really very appreciative!

Thanks!
Reply
Santiago

September 2, 2010

Fantastic! thanks a lot
Reply
lirik

June 17, 2010

great tutorial..thanks
lirik´s last [type] ..Lirik Lagu RSVP – Maulana AF8
Reply
Lucian

@fldtrace June 1, 2010

It works with 2.9.2 and outputs the code properly for the active links.
Reply
Rubira

@rubira March 20, 2010

Save my day!
Reply
Steven Gun

@tntbasecom 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

@blogsaranr November 3, 2009

very useful article for me , thanks
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

@designshard 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