Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More
Tutorials

Highlight The Current Link In WordPress Menus

June 24, 2011

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:

  1. .current-menu-item
  2. .current-page-ancestor
  3. .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.

Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

10 Comments

  1. Go

    Hi, AJ it works but the main menu not highlight : Home About us Blog Team Contact us only sub menu of About us and Blog worked , I only would like the main menu active highlight not for sub menu, how can it fix it. please help.

    Thank you,
    Go

    • AJ Clarke | WPExplorer

      Have a look at the various classes added by WordPress into your menu so you can target them correctly. Also in CSS in order to target only the top level elements you would use the greater then symbol > also known as the “child selector”.

  2. Go

    Hi, AJ

    .current-menu-ancestor > a{ background-color: #d8d8d8;}
    .current_page_item > a{ background-color: #d8d8d8;}
    ul.sf-menu ul .current_page_item > a { background-color: #555 !important;}

    it works nice for mine 🙂

    Thank you,
    Go

  3. Nag

    Superb tip, Spent four hours finding on all the best wordpress forums, thankfully here I got the menu color changing code. AJ you rock!

  4. tpgrg

    .current-menu-item a,
    .current-page-ancestor a,
    .current-post-ancestor a{
    font-style:italic;
    color:#f0f;

    }
    worked fine but the color property is not showing change only the font style why is it so

    • AJ Clarke | WPExplorer

      Your theme is probably overriding it. You should have a look with Firebug or Google Chrome Developer Tools

  5. JeyKeu

    i have a archive-post-type page and it doesn’t tell I’m on the archive page for the post-type. Am I missing something? I;m using the timber-library

    • AJ Clarke

      I think if you have another page on the site with the same slug as the post type archive then the current item class is not added. Double check.

  6. Philip

    Thanks a lot. Finally a good response of my problème 🙂

    Merci, enfin une rĂ©ponse prĂ©cise, claire et simple Ă  un problème rĂ©manent sur WordPress et qui Ă©vite de se lancer dans une usine Ă  gaz, comme on le propose sur la toile… sans trop savoir oĂą l’on va…

  7. Romy

    Thank you so much! I’ve been searching for a solution for HOURS. This works absolutely perfect for my site 🙂

    Gr

Leave a Reply

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

Learn how your comment data is processed by viewing our privacy policy here.