wp_nav_menu not highlighting the current category when viewing a single post

Question

My WordPress site has a bunch of posts, all filed by a top-level category and a bunch of subcategories therein.

I have the main site nav rendering the category pages, which, when clicked, get all posts in that top-level category as an 'archive'.

The category highlights as you'd expect when you visit one of these category pages, however, when visiting a single post in this category, no highlighting for me. I'd expect that the top-level category to which this post belongs would be highlighted and it looks as if that is the intended behaviour.

So, my question is: What can I do to make the category the post belongs to highlight in the main nav when I'm viewing a single post?

The site gets quite a lot of traffic so I am keen to get a solution that scales well.

Answer 1

There are several built-in CSS classes that come with the wp_nav_menu.

In your case, you are looking for something like a current category class, which is not included. But we can easily add that to the CSS classes:

function wpse_134409_current_category_class($classes, $item) {
    if (
        is_single()
        && 'category' === $item->object
        && in_array($item->object_id, wp_get_post_categories($GLOBALS['post']->ID))
    )
        $classes[] = 'current-category';

    return $classes;
} // function wpse_134409_current_category_class

add_filter('nav_menu_css_class', 'wpse_134409_current_category_class', 10, 2);

Please note: this code is untested!

Now you can target your menu item like so:

#menu-id li.current-category {
    /* styles */
}