How to: Highlight the current category

How to: Highlight the current category

Most readers like to know where they are on a website. To help them knowing what they’re exactly browsing right now, you should definitely highlight the current category. It is very easy to do, just read on.

When you're browsing a category, WordPress automatically add a current-cat css class to the <li> element.

So the only thing you have to do is to edit your style.css file and add a style for the current-cat class:

#nav .current-cat{
    background:#999;
    color:#222;
    text-decoration:underline;
}

That's all! Now your readers will know exactly what they're browsing right now.

15 Responses

Plurkr

Dec 28 2008 09:34

making a thin border will be great too

another nice idea will be to add in archive.php / index.php / theloop.php something like this:

Home >> Category Name

instead of the standard display:

Archive for the ‘Category Name’ Category

Agolf Cartson

Dec 28 2008 10:55

Will this always work no matter what theme you might be using?

Plurkr

Dec 28 2008 12:23

@Agolf – I think it will not.

Some theme designers may forget adding this class.

If someone knows this for sure can correct me

Joel Laumans

Dec 28 2008 14:34

Great tip! I used If/Else statements on my site to show the difference between an article and a link-through post

http://creatinginspiration.net

- but something like this might have been a better solution.

Thanks for the tip! will be handy for my next WP theme!

Maigret

Dec 28 2008 15:24

Great recipe ! But is it possible to do the same with a post because in this cas it only works while browsing categories ?

Thanks.

Jean-Baptiste Jung

Dec 28 2008 15:32

@Agolf: yes, it is generated automatically by WP.

@Maigret: Great idea for a future recipe, i’ll think about it

Joseph

Dec 28 2008 16:44

Jean-Baptiste,

What is the easiest way to remove all commenting functionality from WordPress 2.7?

I’d like to get rid of everything including references to comments, input forms, etc.

Thanks!

Jean-Baptiste Jung

Dec 28 2008 16:57

@Joseph: Here is what you need

kmedia

Feb 09 2009 23:13

Does anyone know if this is compatible with WP 2.7? I’m going nuts trying to get this to work and have spent literally days looking for a solution..
TIA.

kmedia

Feb 10 2009 00:56

Nevermind.. 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):

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!
Cheers!

kmedia

Feb 10 2009 01:01

Moderator: oops.. the code was stripped in my last post.. Sorry, I don’t know how to have it show in the blog.