Categories
Tutorials WordPress

Highlight Current Page or Category in WordPress 3.0 Menus

Almost 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 highlighting is vital to ensure a good user experience for your visitors. Without current page highlighting it’s hard for the visitor to know if she is on the correct page or not. Now it’s time to upgrade that tutorial to incorporate the new custom menu functionality in WordPress 3.0 and also add some new functionality.

WordPress 3.0 menus simplify everything… once you understand them

One of the major improvements shipped in WordPress 3.0 was the custom menu functionality. In the past menus were restricted to either simple page or category lists, hard-coded menus stored in the theme files or cumbersome 3rd party plug-ins. No such trouble any more. Custom menus are now available from right within the WordPress admin panel, found under the Appearance tab. And even if you have an older theme that doesn’t support the new menus you can still use them in your sidebar as widgets.

I’m not going to cover how to use the menus from within the admin panel. For that I recommend you read this WordPress Codex article that explains it quite well. Instead I’m going to talk about what you can do with these menus styling wise.

Dissecting the stock menu output

To see what’s possible with these new menus let’s first take a look at the code output from the stock menus. In this example I’ve created one menu with the name “My First Menu” and added it to the site using a sidebar widget. The menu has three buttons; Home pointing to the home page, About pointing to the About page and Contact pointing to the Contact page. (To make the code easier to read I’ve removed the sidebar <ul> and <li> tags so you only see the actual menu output.)


<div class="menu-My-First-Menu-container">
	<ul id="menu-My-First-Menu" class="menu">
		<li id="menu-item-37" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-37">
			<a title="Home" href="http://mysite.com/">Home</a>
		</li>
		<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38">
			<a title="About" href="http://mysite.com/about/">About</a>
		</li>
		<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39">
			<a title="Contact" href="http://mysite.com/contact/">Contact</a>
		</li>
	</ul>
</div>

The key information for this tutorial can be found on line 4:

The first list item has an ID attached to it and then a huge array of classes. They are: “menu-item”, “menu-item-type-custom”, “current-menu-item”, “current_page_item”, “menu-item-home” and “menu-item-37”. Of these the three that matter to us are “current-menu-item”, “current_page_item” and “menu-item-home”. Using these custom classes you can create custom styles that highlight or otherwise affect only certain elements:

.current-menu-item { } targets only the menu item the visitor pressed to get to the menu. This goes for categories as well as pages.

.current-page-item { } targets only the current menu item if that menu item is pointing to a page and the visitor is on that page.

.menu-item-home { } targets only the menu item that points to the root or home page of the site.

So, to answer the question from the original artice: How do I highlight the current page in my menu? The answer is create a custom class style with the name .current-menu-item. As a bonus this style will not only target your pages but also your category index pages and your home page. In the past you had to create separate styles for these.

Going deeper with child pages

But this is just the beginning. With the new WordPress menus you can create custom styles that target more than just pages and category indexes. It turns out the code output for these custom menus is highly dynamic and it interacts with all the content on your page whether you actually use the menus or not. The code output above was generated after clicking on the home page and thus resulted in the three classes listed above (notice those three classes are not present in the two other list items). But what if you went to a page that was a child of one of the menu pages? In the past that would mean the parent page would not be highlighted in the menu. But now it can.

The code below was grabbed from the same site as before after I opened a page for which the About page is the parent:


<li id="menu-item-38" class="menu-item menu-item-type-post_type current-page-ancestor menu-item-38">
	<a title="About" href="http://mysite.com/about/">About</a>
</li>

Look closely at the class array and you’ll find this new class: “current-page-ancestor”. This class is activated every time the visitor opens a page that has a parent page that is featured on the menu. That means you can use this class to highlight the parent in the menu. The easiest way to do this is by simply adding the new class to the style of the original .current-menu-item class:

.current-menu-item, current-page-ancestor { } targets either the menu item for the current page or the menu item for the parent page if a child page is visited.

Category highlighting for single posts

It gets even more interesting when we look at category menu items. Like in the past you can create menus that point to category archives. And you can use the .current-menu-item class to highlight the current category in the menu if you’re on the category index page. But what if you want to highlight the category (or categories) of a particular post when that post is open? Again there are custom classes for this:


<li id="menu-item-40" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-40">
	<a title="Commercials" href="http://mysite.com/category/commercial/">Commercial</a>
</li>

Here the three classes “current-post-ancestor”, “current-menu-parent” and “current-post-parent” are what matters. Either of the three will allow you to highlight the category (or categories) the current post belongs to, but they each work in different ways:

.current-post-ancestor { } targets the menu item as long as the category the menu item points at is an ancestor of the post (so regardless of whether the post is in the category or in a sub-category under the category)

.current-menu-parent { } targets the menu item if it is the parent of the menu to which the post belongs (yes, it’s confusing).

.current-post-parent { } targets the menu item only if the category is the direct parent of the post (menu item will not be highlighted if the post only belongs to a category that is a child of the category the menu item points to).

Bottom line: The style that highlights pages, categories and parents

Because of how this new menu system is set up, and because it works so well you only really need to create one custom style if you want to highlight the current page, current category, page parent and category parent in your menu:


.current-menu-item,
.current-page-ancestor,
.current-post-ancestor { }

To get more advanced you can also create separate highlighting styles depending on what type of menu item it is or what relationship it has to the page, post or index. And if you have multiple menus you can create entirely separate style sets for each of these, complete with current page, post and category highlighting. The possibilities are if not endless then at least quite extensive.

Upon first inspection the code output of the new WordPress 3.0 menu system may look quite messy but now that you see what it’s all for I think you’ll agree with me that this heralds in a whole new age of menu customization for theme developers.

If you want to see this stuff in practice head on over to the website for the 12×12 Vancovuer Photo Marathon where I’ve implemented tons of custom menu highlighting.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

80 replies on “Highlight Current Page or Category in WordPress 3.0 Menus”

Using the widget, the .menu-item-home doesn’t also get .current-menu-item from what I can see. What version did you use to create this tutorial. This is using 3.0.1. Excellent resource by the way. With all the posts and support topics on the old ways of doing this, hard to find anyone who’s broken down the new classes. Cheers.

I’m struggling… I’m using the new classes, the source shows that “.current-menu-item” is definitely being used, but the style isn’t changing?

Any reasons this would not work?

I have noticed a caveat with .current-page-ancestor. If I create a custom page with which to assign the blog to, for example ‘New’. And if ‘News’ is a child of ‘About Us’, ‘News’ does NOT get .current-page-ancestor assigned appropriately in the nav of an individual blog post page. Why is this?

.current-page-ancestor DOES get correctly assigned for other sections that are three levels deep, but not in the blog section.

Any thoughts would be greatly appreciated!

-Paul

Might be a couple months late, but I think the reason the class is not getting assigned is because there is no hierarchical connection between an individual blog post and the menu item. Just because the page called “News” contains blog posts does not mean it is an ancestor. You would want to consider a category page for something like that I think.

It seems that when using the new 3.0 custom menus this functionality is not available. Thus using a custom menu for a primary navigation you lose the ability to highlight the current page. Any thoughts?

@Mia – I also have the same problem. I am using the custam menu as a main navigation and I can’t get the current the highlighted… any solutions so far?

This works quite well, however one little problem that is driving me crazy. The CSS works for background-image and text-decoration, but doesn’t change the color of my font. It’s strange that only some of my CSS styles work on the same selector… has anyone else experienced this? Code is below for css of current_menu_item

#code
.current-menu-item, .current-page-ancestor, .current-post-ancestor{
color: #F02CC6;
background: url(imgs/nav-active-bkg.gif) no-repeat center 0px;
}
/#code

Morten is correct. The a style (possibly the browser’s default a style) is overriding the menu-item classes because those only apply to list-items and not the anchor tags within. To fix this, declare a style for “.current-menu-item a” and specify your color there.

Great tutorial, I hope you can help me here. I am working on a pretty complicated menu system that requires only the parent of a 3rd-level menu item to receive a style. Using .current-page-parent will not suffice because it will apply that style to 1st-level items that are parents as well. I only want to apply it to 2nd-level items that are parents of 3rd-levels. I hope this makes sense. Let me know if you need further explanation. Thanks!

The answer is to micromanage the styles. Drop-down menus are usually stacked in nested unordered lists. To target say only items in the third list make a style that looks something like this:

#menu ul ul ul .current-page-parent

You may have to tweak that one a bit or even put some li-s or other stuff in to make it work, but that’s the general idea of it.

Thanks for the reply, Morten. What you suggested makes perfect sense, except that my problem instance has to do with having a parent as the top-most menu item with its children beneath it in the same level ul (weird I know). The reason I did this was so the first menu item acts as the main section page (mysite.com/section) and the remaining list items beneath it are pages in that section (mysite.com/section/page). It was the only way I could come up with to create the URL structure I wanted.

Anyways, I was able to work my way around it by targeting a specific class I gave to the problematic li. Thanks again.

If you dive into the documentation for the menus you’ll see you can do some pretty complicated queries and get a lot of extra elements attached to your items. I still think with the right ammount of customization you should be able to target each item. Worst case you can write a custom walker class in functions.php and append special classes to individual items through custom fields.

Thanks for this post, it’s really helped me out. Been tearing my hair out for a while here trying to get to grips with the new WP menus, you’ve helped a lot. Some fo the posts above mention inability to change font colour for .current-menu-item – I didn’t have that problem. Cheers.

Is it possible to highlight also the single of a custom post type that is in the nav_menu?
there is no special class added to it to distinguish from other menu items…

Thank for your excellent post. It helped me a lot. My designer was using the convention current_page_item and it was working for the pages (perhaps he declared it somewhere.) My fault was I was using current_menu_item and it was not working. current-menu-item is the right convention. Thanks to you.

Rumio, you’re a life saver! I was using current_menu_item and could not for the life of me work out why the home link (menu widget) was not working but the current_page_item was working for the pages. Thanks to your comment I changed it to current-menu-item and voila all fixed. Phew! Was doing my head in.

Seem without any coding, highlighting the current top-level you’re in works natively with the “Menus” settings. You simply have to add the pages (drag-drop) and indent the child pages.

My template unfortunately only allows one menu.

How do I go all this with the “Cagetories” widget? Or how can I add more menus?

Thank you for your tutorial. Very helpful, but unfortunately, only half my problem was solved.
I created a custom header in my header.php file and it won’t show current page or current menu item. So I want to ‘class’ them manually.
With the current_page_item your php works like a charm:

<li class="page_item “>CLEO

But what would the correct php be for the current_menu_item when it is a category?

I tried this, but this does not work:
<li class="menu_item “>
PRESS

Do you have any idea why it does not work? Or what the correct php would be?
Thank you in advance for your help!

@cleo: You should be able to target category items using .current-post-ancestor { }, .current-menu-parent { }, or .current-post-parent { } depending on what kind of ancestry you want in the highlighting.

The wp_nav_menu(); function has a lot of variables you can use to pass extra code and selectors (see Codex article for a full breakdown), but if you want to add php to the code I think your best option would be to copy the entire wp_nav_menu() function (found under wp-includes/nav-menu-template.php) and create your own either in the functions.php file or as a template_part.

hmm, the php is parsed, when I paste it, let’s try the second example without the opening and closing tabs:

?php if (is_category(‘flowers’)) { echo “current_menu_item”; }?

Ok, still parsed. I suck at this, I apologize. I guess I need to describe it. I would like to add a php ‘if’ clause within the li tags.

For current page, your php works, it writes current_page_item when it is the current page. But what would the php inside the li tag be for current_menu_item?

I tried is_category (my category), echo current_menu_item, but that does not work. Any ideas?

Sorry to have to send you so many messages… I did not mean to spam..

I’d like to thank you for posting such a great info. This is what I was looking for.
I was trying to highlight all the parents of current menu, but I didn’t get anything from all the info above until i tried this .current-menu-ancestor.
It worked like a charm.

Thanks again for your post. It means everything to me!

Thanks for this article. really well written and it helped me to decipher some menu mysteries with Twenty Ten that I was having a hard time figuring out. One little line of CSS and it worked perfectly. Thanks! It’s surprising to me that more people aren’t writing about something that I would think is a common request.

hi,

i have a navigation made from categories. Im using the class current-menu-item to highlight them but that works only when i click on a link. I want when the site first loads in the browser to have the first link highlighted.

example.

Home (category) | News (category) | other (category)

Thanks in advance! 🙂

Oh wait I think I got confused. The Menus option in WordPress 3.0 already highlight the current top-level section while in a sub-section. At least in my theme where this menu is vertical on top, in the header. So I tried as a widget, and put it on the side. The highlighting doesn’t work. Where do you customize the code for the widget output?

Take a look at Bokardo.com. When you’re reading an article, in the top menu is activated “Blog Archives” but it’s also a link to the archive page.

To do this the author creates an specific class to and gives an custom style, but it’s a too complicated method in my opinion, not too clean.

Someone knows any “clean” or just better method to do this? I mean, how to highlight or change the style of the “archive” link on the top meny when you’re in a post page.

Thanks all!

Wow! THANX!

I’ve searched all over the net and tried all kinds of “solutions”. It’s a quack-hell out there.

But your solution actually works for my set-up: WordPress 3.0.1 and Magazine Premium from bavatosan.

Finally I get the best of two worlds, thanks to you: the elegance and simplicity of WPs new menu system, AND full styling-possibilities in style.css

That secured you a place in Heaven 😉

Are,
Norway

5 months later, and I have upgraded to WP 3.2.1, and version 1.17 of Magazine Premium from bavotasan. Now highlighting this way doesn’t work anymore! Any clues, Morten?

i found out you have to go in to advance setting mode in the wordpress navigation settings.
there you can add the “current-post-parent” css-class.
this highlights the menu item whenever a post is shown.

hello thank you for the article.
i like to know if its possible to limitate the functionality of the .current-post-parent
for only one category.
reason is. i have a blog-page that i like to have highlighted when reading a single post.
with .current-post-parent this is possible but whenever i go to my portfolio page that shows post from a different category my blog menu-item gets highlighted too.
it would be cool to limitate the highlighting to one category or menu-div.
or maybe one can exclude the portfolio category – who knows – you?
best regards
thomas b. rouge

since nobody has time to anwser or don’t know an answer or simply does not want to give support i myself digged into the dirty field of the gold mine and eventually found a nugget:
to highlight your blog menu item even when reading a single post go to your style.css and use the class “single”. it’s well hidden but automaticly used by most of the wordpress themes.
now you have to found the div where your “blog”-item is and than put the following in line.
.single li#menu-item-[id-number] a {color:[hexcolor];}all my bestthomas b. rouge

I have spent HOURS trying everything possible to get a single news post to highlight my menu item for News. This did the trick:

.single li#menu-item-[id-number] a {color:[hexcolor];}

Thank you so much for such a simple solution! (Now I can get some sleep.)

Nice one Morten. I search the web high and low for solutions in the course of building websites, and often find the answer is a) On your website and b) Simpler than I expected. Thanks.

i dont know if some1 can help me but i try to explain with my poor english what’s my problem:

i buildet a website with wp 3.0 and i make a mail menu witch include those voices:
home, about us, blog, contact.
under about us and contact i make pages and i correctly see the main menu highilight when i visit tham.

the problem is on the blog page:
this page has a category under it, and inside the category i have my posts.
When i visit the page, and the category im able to see on the top of my site the menu highlighted, but when i visit my post the highlight disappear.

BLOG PAGE:
HomeChi siamoServiziblog » BizupContattiCATEGORY UNDER BLOG PAGEHome
Chi siamo
Servizi
blog »

Bizup

Contatti
POST INSIDE CATEGORY (WICTH IS UNDER BLOG PAGE)Home
Chi siamo
Servizi
blog »

Bizup

Contatti
i dont understand what’s up. some1 can help me?

hello hi, I am sorry I am new to the WP3. I am not getting you from this article.

Are you saying if we give the css in our styles the page, category and parents will work.
.current-menu-item,
.current-page-ancestor,
.current-post-ancestor { }deepak

Shouldn’t this line highlight the navigation tab of the current, single post I am on?

}.single li#current-page-item a{background-color:#feda35; color:#3c372e;}}

I just can’t seem to get it to work 🙁

Great information here. However, I can’t seem to get the color of the text to change. No matter how many ways I try to define the .current-menu-item, I can’t seem to get it to override the current color of the text. Even if I remove all color references to every li, it still won’t work. Is there something else I need to do to make this work?

BTW, love your training sessions on lynda.com

I have used your article as a reference so many times – thanks so much! Question for any php wizards out there: I have elements with children and elements without children. How do I use CSS to style the active state of li elements WITHOUT children look different than the active state of li elements with children? Thanks in advance!

Comments are closed.