Frank asked: “How to dynamically highlight current page?”

Frank, a reader from UK, asked me how he can highlight the current page. When navigating throught pages, WordPress automatically add a class to the current element, so you can use css to style it as you want.

The function used to create a list of published pages, wp_list_pages(), automatically add a class current_page_item to the list item corresponding to the page you're viewing.

You just have to add the .current_page_item class to your style.css file:

/* Style the list element */
li.current_page_item{
background:#eee;
color:#777;
}

/* Style the link element */
li.current_page_item a{
text-decoration:underline;
}

13 Responses

Oct 15 2008 00:20

Thanks mate!

Oct 18 2008 23:54

I’ve always wanted to know how to do this. Thanks for the help.

Oct 30 2008 19:46

AAAH ! YES ! Thank you so much !

Oct 31 2008 01:09

Not sure why you would want to highlight a page. What would be useful, however, would be the ability to dynamically highlight the latest post. Any clues?

Nov 04 2008 02:01

Can we see a copy of the php? If the list is dynamically generated, how do we assign to actual list items?

Apr 09 2009 23:38

Thanks for this tip, i’m gonna use it for sure!

Feb 14 2010 02:09

i have tried for hours to get this to work, and your two lines of instructions helped me infinitely. thank you so much

Mar 27 2010 05:46

This bit of code works really well, and my current page highlights perfectly.

One small niggle I have though, is that when I am on my blog page, the blog page nav is highlighted (good), but when I click a category or post link, it no longer associates that page with the blog, and the highlight goes from the blog nav link.

It’s a relatively small issue but it’s driving me mad. I feel it would make sense for all posts to come under the blog umbrella and for the blog nav link to remain highlighted while you’re in the entire blog section.

If you have any answers for this, it will be really great.

Many thanks,

H

Apr 30 2010 02:44

The child pages are inheriting the highlight in my subpage menu. Do you have any suggestions for fixing that?

Aug 24 2010 03:22

Thanks a million; this worked like a charm! WPRecipes is a great resource as I begin customizing WP sites!

Trackbacks:

Leave a Comment

* Name, Email, Comment are Required