Highlight the Right Menu Item on Custom Post Type Pages
Marks a menu item as current when visitors view a single item of a custom post type, so the "Portfolio" or "Events" link stays highlighted instead of "Blog".
Opens WPIDE on
Code
// Post type => path of the menu item to highlight.
$wpide_menu_parent_map = array(
'portfolio' => '/portfolio/',
'event' => '/events/',
);
add_filter( 'nav_menu_css_class', function ( $classes, $item ) use ( $wpide_menu_parent_map ) {
$type = is_singular() ? get_post_type() : '';
if ( ! $type || ! isset( $wpide_menu_parent_map[ $type ] ) || empty( $item->url ) ) {
return $classes;
}
// Stop the blog page from looking active.
$classes = array_diff( $classes, array( 'current_page_parent' ) );
$path = wp_parse_url( $item->url, PHP_URL_PATH );
if ( $path && untrailingslashit( $path ) === untrailingslashit( $wpide_menu_parent_map[ $type ] ) ) {
$classes[] = 'current-menu-ancestor';
$classes[] = 'current_page_parent';
}
return array_values( $classes );
}, 10, 2 );Notes
Map each post type to the URL path of the menu item that should light up.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.