Highlighting the active menu item in your website’s main menu is really good for usability so that the person viewing your site know exactly what page they are viewing and it makes it easier to browse the menu from the current page. Back before WordPress 3.0 highlighting the current menu item based on the page a visitor was on, was more labor intensive, because you had to run if statements on each link to test if it was the current page or an ancestor of the current page, however, with the introduction of the new drag-and-drop menu system in WordPress version 3, there are now special classes assigned to each link making it easier to style them.
Basic WordPress Menu Output
First let’s take a moment to look at the basic WordPress Menu Ouput (based on a simple menu using the Twenty Ten WordPress Theme) so you can see the type of classes added automatically to the links:
<ul id="menu-my-menu" class="menu"><li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3"><a href="http://mysite.com">Home</a></li>
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="http://mysite.com/sample-page">Page 1</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a href="http://mysite.com/sample-page-2">Page 2</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-6"><a href="http://mysite.com/drop-down">Drop Down</a>
<ul class="sub-menu">
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://mysite.com/drop-down-1">Drop Down 1</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-8"><a href="http://mysite.com/drop-down-2">Drop Down 2</a></li>
</ul>
</li>
</ul>Highlighting Current Pages/Category/Other Menu Links
If you take a look at the code above you can see all the different classes WordPress adds to the menu links but the ones you want to focus on for highlighting are the following:
- .current-menu-item
- .current-page-ancestor
- .current-post-ancestor
.current-menu-item: Class added to the menu item for the current page being viewed by the user.
~ Example: if you are on the “about” page and there is a link to the “about” page then it will inherit this class
.current-page-ancestor: Class added to menu item for the parent page if a child page is currently being viewed.
~ Example: If you have a page called “Pages” and a child page called “about”, if you are on the “about” page then the menu link called “Pages” will inherit this class.
.current-post-ancestor: Class added to the menu item as long as the category is an ancestor of the post being viewed.
~ Example: class is added to the category “Movie” in the menu if you are currently viewing the post called “Harry Potter”, which is in such category.
Basic Sample Menu Highlight
This is a very basic and general highlighting method but it can get you to a good start. Just copy and edit the following CSS in your style.css file to highlight your menu links:
.current-menu-item a,
.current-page-ancestor a,
.current-post-ancestor a { background: #000; }Of course this CSS targets ALL the current classes, which means if you have multiple menus on the site or even menus in your widget areas they will be targeted. So be sure to tweak the CSS to match your theme so it only targets the menu you want to target specifically.