How to include the 'current-menu-ancestor' class on a custom post type menu in WordPress?

All we need is an easy explanation of the problem, so here it is.

I need the WordPress menu to include the ‘current-menu-ancestor’ class to reflect that site is currently in the recipe section. Supposing I have a recipe custom post type. I have the following code in my functions.php but it’s not working:

function add_active_item_classes($classes = array(), $menu_item = false){

if ( get_post_type() == 'recipe' && $menu_item->title == 'Recipes') {
$classes[] = 'current-menu-ancestor';

return $menuclasses;
}
}

Also I don’t know what filter hooks I will use to have this effect? Thanks for your suggestion and assistance.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

This is the final working code:

<?php
function additional_active_item_classes($classes = array(), $menu_item = false){
global $wp_query;

if(in_array('current-menu-item', $menu_item->classes)){
    $classes[] = 'current-menu-item';
}

if ( $menu_item->post_name == 'product' && is_post_type_archive('product') ) {
    $classes[] = 'current-menu-item';
}

if ( $menu_item->post_name == 'product' && is_singular('product') ) {
    $classes[] = 'current-menu-item';
}


return $classes;
}
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

?>

Method 2

This code add class ‘current-menu-ancestor’ to parent item menu of your child CPT or custom taxonomy or default single post, in case you do not have a nested menu structure in the admin panel – only if you have ‘level 0’ menu. For example – if you have Page Product, which display products grid and you go to the single product – WP will not see the parent menu item. The code below improve this:

function additional_active_item_classes( $classes = array(), $menu_item = false ) {
    // custom taxonomy
    if ( $menu_item->title == 'Custom Tax Name Page' && is_tax('custom_tax') ) {
        $classes[] = 'current-menu-ancestor';
    }
    // custom post type single
    if ( $menu_item->title == 'Custom Post Type Page' && is_singular('products') ) {
        $classes[] = 'current-menu-ancestor';
    }
    // blog post single
    if ( $menu_item->title == 'Blog Page' && is_singular('post') ) {
        $classes[] = 'current-menu-ancestor';
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply