I have published an updated tutorial on this topic entitled Highlight Current Page or Category in WordPress 3.0 Menus. Click here to read the new article.
WordPress has a lot of built in functionality that you can tap for advanced customization. One of these which is often ignored is the ability to highlight the current page in menus with CSS. By default, WordPress assigns a special style class to the button that points to the current page. By styling this class differently from the “regular” classes the current page button is highlighted.
In this tutorial we’ll look at how to utilize the built in current page styling, how to create a menu like the one you see above and also how to hard code the functionality into a menu that is not generated dynamically by WordPress.
Identifying the custom styles
If you view the source code of a WordPress blog with a menu like the Reader’s Companion you’ll see that the menu items have been given different classes automatically by the CMS:
The important classes here are page_item which styles all the menu items and current_page_item which is only applied to the current page item. By styling these two classes independently you can get some very nice results. To demonstrate how far you can take this I’ve made a mock-up page that simulates the end output of a WordPress menu with custom styling. You can find it here.
By taking a closer look at the CSS you’ll see that the page_item and current_page_item classes have different styling. The remainder of the code is set up to make the button backgrounds expand and contract in accordance with the Sliding Doors technique from A List Apart.The CSS code on the demo page is identical to the CSS code being used to style the page itself:
page_item styles:
.page_item a {
float: left;
display: block;
background: url("img/right-over.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #DDDDDD;
text-transform: uppercase;
}
.page_item a:hover {
color:white;
}
current_page_item styles:
.current_page_item {
float: left;
background: url("img/left-selected.png") no-repeat left top;
margin: 0;
padding: 0 0 0 8px;
}
.current_page_item a, .current_page_item a:hover {
float: left;
display: block;
background: url("img/right-selected.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #C7532D;
text-transform: uppercase;
}
If you already have your menu up and running properly, all you need to do is style these two classes and you’ll automatically have the current page highlighted in your menu. But this only applies to dynamic menus generated by WordPress. What happens when you hard code your menus yourself?
Assign dynamic styles to hard-coded menus
To get the same effect when you create a hard-coded menu you need to apply some clever PHP code to each of your menu items.
If you don’t understand what I mean by “hard-coded menu” consider this: By default your menu is called by a function within WordPress that lists all of your pages plus the Home page. This call usually looks something like this:
But this function lists all your pages. If you only want certain pages listed you have to take this function out and create a manual list yourself. This is a hard-coded menu.
To make the current_page_item class apply only to the current page item you need to add a small piece of PHP to each of your menu items. This line of code looks like this:
and is applied inside the li tag of each item. To give a concrete example I have added this code to the list items in the list example at the beginning of this tutorial:
When the page is loaded the PHP script looks to see if the page name matches the name in the is_page section and if it does, the current_page_item class is applied. Therefore the name you put in the is_page section of the PHP script must match the name of the page as created in WordPress exactly. If it does, the current page item will be highlighted dynamically.
I have published an updated tutorial on this topic entitled Highlight Current Page or Category in WordPress 3.0 Menus. Click here to read the new article.
Comments
48 responses to “Highlight current page in WordPress menus”
only want to say thanks 🙂
great tips, I like it!
The code you gave for hard coded menus was not working for me, but this alternative was:
Instead of:
I put:
The original ” (is_page(‘home’)) ” turned to ” ( is_home() ) ” and that way it worked.
Just put ” ( is_home() ) ” instead of ” (is_page(’home’)) ” if the post isn’t working for you.
Anyway, great job on the post very nice 🙂
Thanks. “(is_page(’home’))” didn’t worked for me neither!
Yes, the ” ( is_home() ) ” change did the trick for me. Thanks for the original post, and thanks again for the mod.
Works like a charm!
I’m working on an updated version of this article which will have stronger code and also cover the new menu functionality in WP 3.0.
thanks for the info
Yours sincerely,
donnie
http://donnieproperties.blogspot.com
Nice tip. However this didn’t work for my blog, so i changed it to;
Oh thank you very much !!! I’ve been looking for these explanations for a long time, and here they are 🙂
It’s very clear, thank you 🙂
Thanks for the tips, I am hoping to apply this to a similar blog CMS.
Great tut. Works almost perfectly and with PT’s advice it does 100%.
i had to use an important tag to make it work…
.current_page_item a{ color:#DF1C4B!important;} /* the current Page */
nice one
This made it work for me aswell 🙂
oh man, you’re a life saver!
we’re building our new site and i had seriously been wrestling with for hours.
with PT’s typo fix (and a little PHP trial and error to find my blog ‘category’) this worked like a charm.
thank you SO much for posting this.
we’re building our new site and i had seriously been wrestling with for hours.
with PT’s typo fix (and a little PHP
When I open your site in your browser, Safari 4 in Mac OS X, some elements of the page and off to the side and the text is broken: ( Please help me How can I remove the problem
page_item styles:current_page_item styles:If you already have your menu up and running properly, all you need to do is style these two classes and you
Hi, thanks for the great tut. Works great, but having an issue with IE 6. Basically, I have a different a:visited color for the link on my page than menu.
From following your tut it seems in IE 6 it is using the a:visted color I specified in for the general page links. My general page links are green. I want my a links and a:visted links to stay/be white (roll over is blue).
Any ideas. As I said only issue is IE6. I hate IE6, but people won’t stop using it.
WordPress is the best blogging platform ever. It is much better than Typepad and blogspot.`’*
definatelly gonna link back to you on this one, my viewers would enjoy this thanks
i host 5 of my blogs on Blogspot and it is really good for beginners. but if you want something with more features, nothing beats wordpress.
finally I get the answer that I looking for.
thank you so much! 🙂
Thanks, this works nicely!
I found is_page(‘static-page-name’) worked for all my static pages and is_home() worked for my blog page with all the posts.
[…] two years ago I published an article on how to create custom WordPress menus that highlighted the current page. It’s still one of the most popular posts on this site, and for good reason: Current page […]
wow..thanks..great..:)
i was just looking for this. my purpose was solved. thanks for the codes
Hey Morten! I’m positive this is the tutorial I need to get my dynamic menu to function properly. I have been messing with this for awhile and I CAN’t seem to get the active page to highlight properly. do you HAVE to hardcode the to get this to work? I’m simply using and I need it to reflect the active tab when clicked.. please help!
I’m using dp_list_pages sorry
I get two classes on top of each other now… 🙁
[…] classes which WordPress already uses when displaying links in a menu. I found this tutorial very helpful in showing me how to do this. For both of these classes I created styles which would […]
Thanks! It was helpfully for me! 🙂
Hello,
Thank you for this great tutorial.
It works fine indeed with custom menu’s, but it only works for me when I link to wordpress pages.
When in the menu I link to wordpress categories, the code does not recognize the page-name.
How do I know the page-name of a category, or how can I refer in the menu to a specific category?
Thank you in advance for your help!
Claire
I apologize – asked for help to quickly.
Your new article explains it all.
Just use: current-menu-item
Thanks!!
Nice tutorial… you can also find other CSS and WordPress tips at http://www.upperpages.com/en/category/tutorials/.
Have a gr8 day
Very useful, thanks 🙂
your a genius man! thanks!
Nice tutorial, this is the explanation for this I’m looking for …
Immediately, I bookmark this page.
Thank you so much!
Thanks! Your post has gotten me about half way to my goal. I’m looking for a way to highlight the current menu item if you are on that page or other pages that match a specific category. Eg. if one of my top level pages was “Product” I would like the Product menu item to be highlighted anytime a page or post is given the category or taxonomy of “product”. Any ideas?
[…] http://www.designisphilosophy.com/css/highlight-current-page-in-wordpress-menus/ Comparte esto:FacebookShareStumbleUponPrintDiggEmailReddit Filed under: Technology, WordPress Leave a comment Comments (0) Trackbacks (0) ( subscribe to comments on this post ) […]
I used wordpress 3.3 and I try this syntax
But its not working….
Any idea…
A very bad way to go about doing this….Imagine changing your header.php file (or wherever you menu is) Every time you want to add a new page to the menu.
Which is why there is an update at the very top of the article pointing to the new tutorial on how to do dynamic highlighting with WordPress 3.0 menus: http://www.designisphilosophy.com/tutorials/highlight-current-page-or-category-20100809/
[…] WordPress Tutorial: Highlight current page in WordPress menus | design is philosophy […]
Not sure if this helps anyone. But I was having an issue when I wanted to get the text color of the current menu item to be different than the the text color of the unselected menu items. Since the classes .current_page_item and .current_page_parent are applied to the element and not to the element, the default colors would override whatever css I applied to the items. I ended up being able to get it work like this, if for example the current page is supposed to be in blue text, and everything else in black text:
.mainMenu li:not(.current_page_item):not(.current_page_parent) a {
color: black;
}
.current_page_item a, .current_page_parent a {
color: blue;
}
This effectively targets the of a that’s not of those two classes, and sets it to black. And the that does belong to one of those two classes to blue.
THX!
Thanks. Works perfectly
Heya outstanding website! Does running a blog similar to this take a massive amount work?
I have absolutely no understanding of programming however I had been hoping to start my own blog soon.
Anyhow, should you have any ideas or techniques for new blog owners
please share. I know this is off topic nevertheless I simply wanted to ask.
Many thanks!
Any idea how to create two different current_page_item class for two different menu? Example: top and footer menu – If I set up values for current_page_item the current link in footer menu looks the same as in top menu, but it shouldn’t.