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" );
}
Adam says
13. august 2012 at 20:33Very 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!
vayu says
25. september 2012 at 08:50Hi 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. 🙂
Piet says
25. september 2012 at 08:32Amazing code snippet, thanks!
One little typo in the code on line 10 it should read {custom-post-type}-menu-item
Nick says
21. april 2013 at 06:43hey, 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?
vayu says
21. april 2013 at 09:47Hi 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.
Dave says
31. august 2013 at 04:03Dude! thank you! Struggled with this for a while! your tip saved me!
borxa says
3. september 2013 at 20:05Hi there!
thaks about your tip!
how can i do the same with a custom taxonomy?
cheers
vayu says
5. september 2013 at 23:15Hi 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?