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

1
votes

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)

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/:

About Us

<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 &#038; 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>

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):

About Us

<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 &#038; 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>

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.

3
wordpressmenucategories

3 Answers

1
votes

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>
0
votes

I have tried to generate the above issue and I am able to get the classes "current_page_parent" so now you can apply CSS based on above

0
votes

You can probably do this with a filter. I have not tested this, but logically it should work.

function add_parent_class_to_nav( $atts, $item, $args ) {
    $about_id = 12345; // Enter ID of about menu item
    if ( in_category( 'news' ) ) {
        if ( $item->ID === $about_id ) {
            $atts['class'] = 'current-page-parent'; // Add the class needed to make the parent highlight
        }
    }
    return $atts;
}

add_filter( 'nav_menu_link_attributes', 'add_parent_class_to_nav', 10, 3 );