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 classes 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-item
// 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" );
}
Very cool. One question… When I’m on a single-{post_type}.php page, and the parent page (of that custom post type) is listed in the wp_nav_menu, that parent page in the nav menu isn’t highlighted (and it should be). Any thoughts on how to get this to work?
Thanks for the code!
Hi Adam.
That’s exactly what this code should fix. You can see it in use on this site for instance:
http://fysiorejser.dk/rejser/
I am not sure if I have misunderstood your question. 🙂
Amazing code snippet, thanks!
One little typo in the code on line 10 it should read {custom-post-type}-menu-item
hey, I put this into my menu.php file, and it doesnt seem to do anything. Is that where i should implement this code to fix the issue with highlighting menu links through single.php? Or should i put this into the wp_nav_menu.php file?
Hi Nick.
You should never ever change the WordPress source code. If you do, then it will be deleted next time you update WordPress.
You should put this code in the functions.php file in your theme. wp-content/themes/your-theme/functions.php.
Dude! thank you! Struggled with this for a while! your tip saved me!
Hi there!
thaks about your tip!
how can i do the same with a custom taxonomy?
cheers
Hi Borxa. Good question! I just tried to setup a quick demo and tested it locally. It seems as if it is now built-in the core. Propper classes are added to the current menu item as well as parent/ancestor menu items. Works for both custom post types and custom taxonomies. Are you running the latest WP version 3.6? Can you confirm that it works for you too?