Categories
CSS Tutorials WordPress

Highlight current page in WordPress menus

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.

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.

48 replies on “Highlight current page in WordPress menus”

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

Instead of:

  • home
  • Home
  • I put:

  • Home
  • 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 πŸ™‚

    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 had to use an important tag to make it work…

    .current_page_item a{ color:#DF1C4B!important;} /* the current Page */

    nice one

    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.

    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.`’*

    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.

    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.

    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!

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

    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?

    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.

    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.

    Comments are closed.