Wordpress: Highlight "Blog" Menu Item on all Blog Pages

Most WordPress themes highlight the current menu item, so does my current theme Inovado. While the highlighting works very well on static pages, it has a counterintuitive behaviour on blog pages: the corresponding menu item is only highlighted if on the root page. As soon as one visits a single blog post or filters by category, tag or date, the highlight disappears.

Fix

There are many workarounds to get the blog menu highlighted on all blog related pages, but most of them didn’t work for me. Here’s a solution that has the desired effect:

Edit: At some point a closing bracket went missing, thanks Shiraz for pointing that out.

function add_custom_class($classes=array(), $menu_item=false) {
    if ( !is_page() && 'Blog' == $menu_item->title && 
            !in_array( 'current-menu-item', $classes ) ) {
        $classes[] = 'current-menu-item';        
    }                    
    return $classes;
}
add_filter('nav_menu_css_class', 'add_custom_class', 100, 2); 

Change the test $menu_item->title == ‘Blog’ in line 2 according to the label of your blog menu item. Then add the snippet to functions.php. (You can also download the code from GIST).

How does the fix work?

The highlight for menu items is triggered by the CSS class current_page_item, e.g., in the following example the menu item “Blog”:

<ul id="nav" class="menu sf-js-enabled">
   <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35">
      <a href="https://bin.re/phd-thesis/">PhD Thesis</a>
   </li>
   <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
      <a href="https://bin.re/publications/">Publications</a>
   </li>
   <li id="menu-item-867" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-867">
      <a href="https://bin.re">Blog</a>
   </li>
</ul>

The code registers a new filter with add_filter(’nav_menu_css_class’, ‘add_custom_class’, 100, 2); which will be triggered by the WordPress hook nav_menu_css_class. The hook runs when the navigation menu’s CSS classes are built. The second argument of add_filter is the (arbitrary) name of the callback function. The third argument determines the priority (don’t now exactly what priority does). The fourth argument corresponds to the number of arguments of the callback function.

The callback function add_custom_class($classes=array(), $menu_item=false) has two arguments. The first is an array to which the function adds class names that should be appended to the menu item. The second argument is the processed menu item (the callback function will be called once for each menu item). We only want to highlight the “blog” menu item, hence the test $menu_item->title == ‘Blog’. Furthermore, the blog menu item should only be highlighted if we are actually on a blog post, i.e., NOT on a static page. That’s what the test !is_page() is for. The last test !in_array( ‘current-menu-item’, $classes ) is to make sure that the CSS class is not added more than once. If all those conditions apply, we set the $classes[] to ‘current-menu-item’.

Archived Comments