Highlight active categories (while browsing a post)

Published: On Sunday, June 10, 2007

Note: You'd maybe like to try Show Active Category plugin first.

A few days ago I worked on a task how to highlight categories linked with the just browsed article. The image is simple: page with an article (post) is opened and in sidebar is even a list of categories. The active post belongs under one or more categories (actually they are tags). So how to mark (to display differently) these „touched“ categories?

Well it's not… it wasn't too easy, I tried to understand the related part of WordPress core almost two hours. What a feeling I enjoyed some time after that, when the client I made this project for, said that „This is not what he wanted.“. So it's better to ask twice for sure ;). Now the procedure.

What we're gonna do now?

The category-list is a list in HTML as well (by default) and inside list-items there are links to the category page. We just add a (CSS) class to the „active“ categories (and you will then add a style definition into css file). Finally it will (simplified) look like this:

<ul>
  <li><a class="active">Category name</a></li>
  <li>...</li>
</ul>

Instructions

This procedure was tested on WP version 2.5, in newer versions some things can and probably will be different, for example numbers of lines, etc.

Note: because we will edit core-file, a possible upgrade will take changes back. This is not a good message, I know, so I recommend to make a note for yourself somewhere or add this page into bookmarks.

  • Open the file wp-includes/clas­ses.php
  • Go to line 620 (in WP 2.5.1), the line's content is… (later we change it)
$link = '<a href="' . get_category_link( $category->cat_ID ) . '" ';
  • before this line add code
$active_class = (is_single () AND in_category($category->cat_ID)) ? ' class="active"' : '';
  • into the string on the next line add $active_class variable, so that the line will look like
$link = '<a'. $active_class .' href="' . get_category_link( $category->cat_ID ) . '" ';
  • save changes and style a.active in your css file as you wish

This as a plug-in?

Yes, I think it is possible to transform these step-by-step instructions into a plugin that would work similarly like the plugin coming up in next paragraph. No, I know many more important things I could do for WordPress so I'm not going to (try to) do this plugin. :-)

Wanted something a bit different?

If you are searching for instructions (or plugin) how to highlight category you are just browsing and this article obviously speaks about something else, don't be sad – I give you a link to the catHightligt plugin you are probably searching for…

Useful? Bookmark or share:

  • email
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit
  • Propeller
  • Twitter

Comments

  1. 1.  Vassil wrote: On December 1., 2007 comment number 1

    Helpful :) Thanks :)

  2. 2.  PetitPrince wrote: On April 10., 2008 comment number 2

    The trick still works in WP 2.5. The line is different though, it's 632.

  3. 3.  Kahi [author] wrote: On April 11., 2008 comment number 3

    ↪ PetitPrince Much thanks! The article was updated.

  4. 4.  Michal wrote: On July 6., 2008 comment number 4

    In WP 2.5.1 is it on line 620.

  5. 5.  Michal wrote: On July 6., 2008 comment number 5

    And the filename is classes.php

  6. 6.  Kahi [author] wrote: On July 6., 2008 comment number 6

    ↪ Michal: thanks, up-to-date again.

  7. 7.  Kriss wrote: On July 17., 2008 comment number 7

    THANKS thats great works well after some fiddling.

    any idea how to make it work for liks to individual posts aswell??

  8. 8.  Kahi [author] wrote: On July 17., 2008 comment number 8

    ↪ drk …depends on the way you show the list of posts… if I understand your need correctly.

  9. 9.  drk wrote: On July 27., 2008 comment number 9

    hi kahi, i made a little plugin to solve your problem. you can get it here:

    http://www.scre­enshine.net/blog/14­74_wordpress-plugin-show-active-category

    the page is in german, but in the zip file you will find an english readme.txt

    hope that helps. :)

  10. 10.  Kahi [author] wrote: On July 27., 2008 comment number 10

    ↪ Poxa Quite clever, thanks for the announcement.

  11. 11.  Poxa wrote: On December 9., 2008 comment number 11

    Kahi, this is probably the best looking wordpress design I've ever seen:) – this blog I mean, it's beautiful. I can't let it go…
    I bow before thee…

  12. 12.  katharina wrote: On October 18., 2009 comment number 12

    do you probably also know how I could put the „$active_class“ into the li item instead of the a?
    thanks a lot, kathrina

    (btw, in wordpress 2.8.4 you have to wprk around line 1330 to put the $active_class into the <a> item)

  13. 13.  Kahi [author] wrote: On October 19., 2009 comment number 13

    katharina, could you try this plugin http://kahi.cz/wor­dpress/highlig­ht-used-categories-plugin/? The manual modification described in this article is probably not necessary anymore.

  14. 14.  ixy wrote: On November 27., 2009 comment number 14

    Thanks for sharing this tutorial.
    I've been struggling for several hours with php, until I found this page, and it does exactly what I needed. :)
    (I've used this not the plugin because the plugin was a RAR but I'm sure it is good, as well)

  15. 15.  Kahi [author] wrote: On November 28., 2009 comment number 15

    ixy, thanks for leting me know the RAR might be sometimes a problem. I will make it ZIP next time.

  16. 16.  razočaran wrote: On October 27., 2010 comment number 16

    This line does not exist on wp 3.1. :-(

  17. 17.  Kahi [author] wrote: On October 27., 2010 comment number 17

    ↪ razočaran I would try to modify line 1346 or the following. Can't test it, no time, sorry.

I quit working with WordPress, comments are closed. My plugins will not be updated any more – at least not by me. Feel free to modify my source codes though… Also I am not able to provide support, sorry. –Kahi