Highlighting wp_nav_menu() ancestor with Children for custom post types

I was in need of a solution to highlight the top menu item for a custom post type when viewing a single subpage (cpt).  There is no built-in method in WordPress that adds a class to the top menu item of cpt, when viewing a child item.

I spent some time searching for this topic on the net and came across this post on WordPress Answers.  I specifically noticed somatics answer.

I had created a cpt called “trips”.  Because it was for a danish website I could not have a menu item named Trips.

I just didn’t like having to enter the slug into my Title Attribute, as trips makes no sense in danish and I didn’t want the browser tooltip to appear on the menu line on mouseover.  So I came up with idea of adding a class name of the cpt slug instead to the menu item either.

So I went into the Menus section and added this “trips-menu-item” to the css classses in the menu item.

 

The code below then finds the  menu item with this class trips-menu-item and adds another “current_page_parent” class to it.  Furthermore, it removes the “current_page_parent” from the blog menu item, if this is present.

add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2);
function current_type_nav_class($classes, $item) {
    // Get post_type for this post
    $post_type = get_query_var('post_type');

    // Removes current_page_parent class from blog menu item
    if ( get_post_type() == $post_type )
        $classes = array_filter($classes, "get_current_value" );

    // Go to Menus and add a menu class named: {custom-post-type}-menu
    // This adds a current_page_parent class to the parent menu item
    if( in_array( $post_type.'-menu-item', $classes ) )
        array_push($classes, 'current_page_parent');

    return $classes;
}
function get_current_value( $element ) {
    return ( $element != "current_page_parent" );
}

 

Speak Your Mind

*