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)

Newer Comments »
  1. kmedia
    February 9, 2009

    Nevermind.. As stated before, I’m using the SuckerFish menu and WP’s /%category% permalink structure setting.

    For anyone who has struggled with highlighting WordPress’ current category link as much as I have, below is what worked for me (I had to abandon the “wp_list_categories” function in my navigation and use the following instead):

    [sourcecode language='css']
    <a href=”http://www.website.com/category/blog-page”>
    [/sourcecode]

    Repeat the above for each category. It took about 2 days to figure it out.. but I’m now one of the happiest people in the world! And no plugin needed! :)
    Cheers!

    Reply
  2. kmedia
    February 8, 2009

    Thanks for the reply Design Shard.
    The Suckerfish CSS does define the active state but for some reason WordPress isn’t reading and/or displaying it. The menu works perfectly with my non-WordPress pages.

    Since I’ve seen throughout my exhaustive searches that highlighting the current category was capable up through version 2.6, I have to think that it’s a bug with 2.7.

    I’d also think there needs to be a PHP if statement somewhere around the wp_list_categories HTML checking whether that category is actually active in order to trigger the css change. I just don’t know much about how WordPress works (or PHP programming for that matter).

    This is killing me.. :/

    Reply
  3. Design Shard
    February 6, 2009

    @Kmedia – i would suspect that suckerfish already has this but im not sure you may want to look on there web site for support, and im not sure if this plugin runs well on wp2.7 either.

    Reply
  4. kmedia
    February 5, 2009

    I can’t get it to work and desperately would like this feature for a website I’m currently working on (and on future websites).. I can’t imagine that I’m doing anything wrong – does anyone know if this works with WP 2.7? Does anyone know how to fix it for 2.7? It seems like it should already built into WordPress… an essential feature for me. (Using the SuckerFish menu.)
    Thanks!

    Reply
  5. kasper
    December 16, 2008

    Thanks for the good tutorial.

    Reply
  6. povilli
    November 17, 2008

    This post thanks

    povilli´s latest blog post..Msn Polat Alemdar Avatarları

    Reply
  7. Julia
    November 14, 2008

    Hi
    This is fantastic – thanks. Do you know how this could work so that the single post ancestor category (eg category “news” where a single post in category “press releases” with a parent category of “news”) picks up an active class – this way it would keep my expanding lists expanded when in a single post. Thanks!

    Reply
  8. Krishna Kastubi
    November 10, 2008

    Thank you very much… this is what i’ve been looking for

    Reply
  9. Vardis
    November 9, 2008

    Great info – thank you.

    Reply
  10. zeus
    November 6, 2008

    categorized bloggs makes archiving highly organized. visual details will make it even more organized. when we do blogging for our customers, we always emphasized on categories so our customer can easily appreciate our works.thanks.

    Reply
  11. ApV
    November 5, 2008

    very interesting, thanks

    Reply
  12. Amanda Evans
    October 29, 2008

    Great tutorial and it works brilliantly.

    Amanda Evans´s latest blog post..Some Excellent Freelance Writing Posts

    Reply
  13. cmsme
    October 22, 2008

    hi, great plugin, and this *almost* fixes a problem i have. however, i need a way to include categorys/posts into a page, so it appears in the admin side site tree. i see your navigation menu lists all the static pages, then follows with category links, which makes me assume you are unable to reorder your navigation in the admin. what i need to do is have menu items in this order PAGE | PAGE | CATEGORY | PAGE . is this possible with your plugin? many thanks

    Reply
  14. iddaa
    October 15, 2008

    Nice post.Thanks..

    iddaa´s lastest blog post..DALE CAVESE

    Reply
  15. insic
    October 14, 2008

    Nice Post. im thinking of doing this in my blog also. thank for sharing

    insic´s lastest blog post..Zend Framework Blog Application Tutorial – Part 6: Introduction to Zend_Form and Authentication with Zend_Auth

    Reply
  16. Matt
    October 14, 2008

    Nice work, this is definitely a great enhancement for usability & accessibility.

    Matt´s lastest blog post..Which Layout is for me?

    Reply
  17. web design
    October 13, 2008

    Best advice…..on wordpress
    thank you for sharing it with us

    Reply
  18. Website Templates
    October 13, 2008

    This is a handy snippet, thank you!

    Reply
  19. Max | Design Shard
    October 13, 2008

    @ Frank – current-cat would only work when you are browsing the actual category, not when you are on the single post page, that is why i could not highlight the category using the built in class, even though it shows when on the category page.

    Reply
  20. Frank
    October 13, 2008

    Sorry – why to use a plugin? WordPress give the class current-cat for a active category and this is easy to format with css.
    I think, it is better to use the standard-class of wordpress. This makes easy to share Themes and ideas.
    West regards

    Frank´s lastest blog post..Secure Include Plugin In WordPress

    Reply
  21. NaldzGraphics
    October 12, 2008

    very nice tutorial:) nice work Max!!!!!!your really doing great.

    Ronald

    NaldzGraphics´s lastest blog post..30 Free High Quality .PSD Files to Grab Part:2

    Reply
  22. Tracey Grady
    October 12, 2008

    Thanks for the walk-through for another very handy tool in the Wordpress ensemble.

    Tracey Grady´s lastest blog post..Design checklist: What clients should provide their designer

    Reply
  24. Geoserv
    October 12, 2008

    STUMBLED!

    Nice navigation effect.

    Geoserv´s lastest blog post..Looking for cheap hosting?

    Reply
  25. Mike Smith
    October 12, 2008

    Nice tutorial. I could have used this a couple weeks ago :) Definitely getting stumbled and delicious tagged.

    Mike

    Reply
Newer Comments »

Leave a Reply

CommentLuv Enabled
Website Templates Wordpress Hosting

Monthly Archives

Design Shard Flickr Group

.Football (World version)Football (American version)poster and bookmark for literary event "LibriAndando"BoxoWR10Long Live Copywritingmama's boymurder on the dancefloorincomplet OrangeLogo?Blocks3