How to Highlight the Current Page when Using WordPress Navigation Menus

WordPress 3.0 brought us a shiny new navigation system with drag and drop style custom menus. This added theme feature has been quietly making everyone’s lives much easier. Today we’re going to walk through a basic styling tip for highlighting the current page. This is a helpful little CSS tweak that makes your website easier to navigate.

If your theme supports WordPress menus, then you already have a built-in class to make it super easy to highlight the current page being viewed. If you’re using an older theme that does not offer support for WordPress menus, then you can easily add it in yourself by following the tutorial in the codex.

By default, WordPress menus output this class with the list item: current-menu-item

You can choose to target either the list item or the link itself. This example specifies the background color and font color for the current list item:

1
2
3
4
li.current-menu-item {
background: #3FAEA5;
color:#fff;
}

So simple, right? Here’s how you might target the link itself:

1
2
3
4
li.current-menu-item a {
text-decoration: underline;
background:#ccc;
}

You can add colors, backgrounds, text shadows, background images, or anything you like to highlight the current page.

If your theme supports the creation of multiple navigation menus, then you’ll need to be a bit more specific in your CSS if you want to have them styled differently. You can use Firebug to find the unique ID of your unordered list. It will contain the name you gave to your menu. If you have other menus with different styles on the page, then you’ll need to differentiate them in your CSS:

1
2
3
4
#menu-main-pages li.current-menu-item {
background: #3FAEA5;
color:#fff;
}

With those simple snippets you should have the basics for highlighting current menu items. Have fun styling your custom menus and let us know if there are any more CSS tutorials you’d be interested to see on wpmu.org.

Tags ,

Comments (9)

  1. Thanks for that!
    Note if you are trying to style the link, as in example 2, the “a” CSS selector will also affect all submenus you may have, so you may have to “undo” your changes for submenus by doing something along the lines of li.current-menu-item .sub-menu a{text-decoration: none;}

  2. This might be an obviously ignorant question. Is it possible to highlight the current item when pages are listed via wp_list_pages(‘title_li=&depth=1′)? In other words, I know I can hard code the menu, but my site frequently changes top level pages. Each time I put up a new page I need to go into the header and add or delete an section.

    I’ve looked for days on the net and only found ways to highlight items which are listed in the Page name format. Since wp_list_pages is a done deal, I suspect it isn’t possible to force a color onto one of its pages already listed. But it would be nice. Thanks.

Participate