Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

<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 &#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>
</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 &#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>
</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.

share|improve this question
    
I had the same question last week. –  Dan Gayle Sep 7 '10 at 20:18
    
Hi @Dan Smart: In general I'll concur with Chris_O that it's probably not possible. But I think it might be with a hook however I don't fully understand the question. Would you mind add code-formatted versions of your HTML to your question for both the way it is output and the way it needs to be output for the way you want? Please remove the non-relevant HTML, of course. –  MikeSchinkel Sep 8 '10 at 18:19
    
Mike - I've updated it with the appropriate example code, hopefully this helps clarify. –  Dan Smart Sep 9 '10 at 8:07

4 Answers 4

up vote 1 down vote accepted

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
share|improve this answer
    
Ok thanks for confirming this. I looked at overriding the _wp_menu_item_classes_by_context function to add this, but I think I'll have to look to submit something on trac for this instead. So my only option is to create a page listing the category's contents, replicating the /category/news page? –  Dan Smart Sep 8 '10 at 7:22
    
Even if you do that About won't be highlighted when you are on a single post in news category. I tried all variations and it only highlighted About if I made a category called about and set it as the parent category to news. There are 3 or 4 tickets on trac regarding similar issues. –  Chris_O Sep 8 '10 at 8:49

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>
share|improve this answer
    
If you use another jQuery-based plugin you probably want to rewrite this as jQuery too, since combining jQuery.ready() and body.onload might give conflicts. –  Jan Fabry Nov 6 '10 at 10:15

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

share|improve this answer

You may find this thread forum very informative, as I am closer to the solution.

http://diythemes.com/forums/showthread.php?39258-Category-highlighting-for-single-post-%28-wp-menu-%29.

Pierre

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.