How do I get my wp_nav_menu single category page to highlight the parent?

3 Views

With the new wp_nav_menu system, it is possible to add a category as a menu item, so in my example I have a ‘news’ category, which is a submenu item of ‘About’.

About (page)
--news (category)
--history (page)
--contact us (page)

Read More

The menu highlighting CSS picks up from current-menu-parent and current-menu-ancestor, so that when I’m in a submenu section, the top level menu item (e.g. ‘About’) is highlighted when I visit ‘news’.

This works fine, apart from when I visit a post in the ‘news’ category, which matches is_single() and in_category(‘news’).

As far as I can see in Firebug, the ‘current-menu-parent’ and ‘current-menu-ancestor’ is applied to the ‘news’ menu item, however it’s not applied to the ‘About’ top level menu item.

Is there something I’m missing in setting up my menu? I’ve tried using a custom walker, however it seems that the initial menu ancestors are not being set up properly?

It seems my only solution (without resorting to a nasty JQuery hack) is to create a ‘news’ page which queries the news posts, rather than pointing to the news ‘category’.

Any ideas?

Thanks, Dan

Update with code sample 09/09/2010

The way it is currently, viewing a single page in the News category http://www.example.com/2010/09/top-news-did-you-know/:

<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="http://www.example.com/about/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy"><a href="http://www.example.com/category/events/">Events</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent current-menu-parent"><a href="http://www.example.com/category/news/">News & views</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type"><a href="http://www.example.com/contact-us/">Contact Us</a></li>
</ul></li>

So you see that “About Us” doesn’t have any CSS class to indicate it is a parent of the currently viewed page.

How I think it should work (and to be honest, if it doesn’t do this, then it’s a bug due to lack of implementation):

<li id="menu-item-28" class="menu-item menu-item-type-post_type current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-28"><a href="http://www.example.com/about/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy"><a href="http://www.example.com/category/events/">Events</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent current-menu-parent"><a href="http://www.example.com/category/news/">News & views</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type"><a href="http://www.example.com/contact-us/">Contact Us</a></li>
</ul></li>

This has the current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor CSS classes attached to the Top level menu item. It works this way for every other page, or even when viewing the category itself, just not a single page in a category.

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. Currently this is not possible if a page menu item is a parent to a category menu item.

    In your example if About was a category and News was child category then the About (category) menu item would be assigned:

    • current-post-ancestor
    • current-menu-parent
    • current-post-parent

  2. I was also having the same issue. I couldn’t find a php hack, so I used a javascript one:

    function findAncestor(){
    var currentParentLi = document.getElementsByClassName("current-menu-parent");
    if(currentParentLi){
        var currentAncestorLi = currentParentLi[0].parentNode.parentNode;
        if(currentAncestorLi && currentAncestorLi.tagName=="LI"){
            currentAncestorLi.className += " current-menu-ancestor";
        }
    }
}

    Put the above code in a .js file, then reference it in the head of your page and call the findAncestor() function on window.onload, i.e.:

    <script type="text/javascript">
<!--
window.onload = function() {
    findAncestor()
}
//-->
</script>

  3. I concur with Chris_O

    So, I have a static front page, 2 main category + 1 subcategory under those, and another page. Driven by WordPress 3.0.1 and Thesis 1.8, using WordPress menu instead of Thesis menu.

    For highlighting the main category I used:.current-post-ancestor a {
    background:#FFFFFF;}

    ( this highlight the main category when on single post )

    For highlighting subcategory I used: .sub-menu .current-post-ancestor a {
    background:#F0EEC2;}

    ( this highlight the subcategory -under main category- when on single post of subcategory )

    I would like both “main category” and “subcategory” to be highlighted.

    But I cannot find the trick.

    Pierre