Highlight current page in WordPress menus

By Morten Rand-Hendriksen on

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:

<div id="menu">
<ul>
	<li class="page_item current_page_item"><a href="http://expression.pinkandyellow.com">home</a></li>
	<li class="page_item page-item-9"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li>
	<li class="page_item page-item-11"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li>
	<li class="page_item page-item-13"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li>
	<li class="page_item page-item-15"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li>
	<li class="page_item page-item-17"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li>
</ul>
</div>

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:

<?php wp_list_pages('title_li=&depth=1'); ?>

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:

<?php if (is_page('home')) { echo "current_page_item"; }?>

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:

<div id="menu">
<ul>
	<li class="page_item <?php if (is_page('home')) { echo "current_page_item"; }?>"><a href="http://expression.pinkandyellow.com">home</a></li>
	<li class="page_item page-item-9 <?php if (is_page('Lesson Files')) { echo "current_page_item"; }?>"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li>
	<li class="page_item page-item-11 <?php if (is_page('About the Author')) { echo "current_page_item"; }?>"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li>
	<li class="page_item page-item-13 <?php if (is_page('FAQ')) { echo "current_page_item"; }?>"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li>
	<li class="page_item page-item-15 <?php if (is_page('Further Reading')) { echo "current_page_item"; }?>"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li>
	<li class="page_item page-item-17 <?php if (is_page('Contact')) { echo "current_page_item"; }?>"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li>
</ul>
</div>

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.

43 comments

  3. The code you gave for hard coded menus was not working for me, but this alternative was:

    Instead of:

    <li class="page_item "><a href="http://expression.pinkandyellow.com" rel="nofollow">home</a>
	<li class="page_item page-item-9 "><a href="/" rel="nofollow">Home</a>

    I put:

    <li class="page_item "><a href="/" rel="nofollow">Home</a>

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

  10. 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.

  13. 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

  14. 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.

  17. 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.

  19. 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.

  20. Pingback: WordPress 3.0 Tutorial: Highlight Current Page or Category in WordPress 3.0 Menus | Design is Philosophy - The Pink & Yellow Media Blog

  23. 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!

  25. Pingback: Riley Boyd: Web Design and Digital Media » Welcome to my brand-new site!

  27. 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

  32. 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?

  33. Pingback: How to customize WP menus for Current page actions « igodesign.com

  35. 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.

  36. Pingback: WordPress Tutorial: Highlight current page in WordPress menus | design is philosophy » Web Design

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">