Add current-menu-item CSS class to article type archive page menu item when opening article type detail page

As we know, when we visit a WordPress URL, WordPress will automatically add “current-menu-item” class to the URL in the navigation menu item to help the front-end developer to highlight it. When we have more than one post type, we sometimes need to add the “current-menu” class to the archive page of the post type when we visit the post details page of the post type. For example, when we visit http://abc.com/box/small-box, we want to add “current-menu-item” class to the archive page http://abc.com/box/ of the post type, WordPress does not support this feature by default. This feature is not supported by WordPress by default. Strictly speaking, the post type details page and the post type archive page are not the same page, but from a user experience point of view, this action makes sense.

Add the current menu class to the article type detail page via the nav_menu_css_class Action hook

We can realize this requirement by comparing the article type Slug with the URL string, here is the code to implement it, this method is not very rigorous, and in special cases, there will be bugs.

add_action('nav_menu_css_class', function ($classes, $item)
{

    // 获取当前文章
    global $post;

    // 获取当前文章的文章类型
    $current_post_type      = get_post_type_object(get_post_type($post->ID));
    $current_post_type_slug = $current_post_type->rewrite[ 'slug' ];

    // 获取导航菜单项的 URL
    $menu_slug = strtolower(trim($item->url));

    // 如果菜单项包含当前文章类型的 Slug，添加当前菜单 CSS 类
    if (strpos($menu_slug, $current_post_type_slug) !== false) {
        $classes[] = 'current-menu-item';
    }

    // 返回添加后的 CSS 类数据
    return $classes;

}, 10, 2);

Note that the above code is only effective if the fixed link structure is set to “Article Name”, in other cases you can refer to the above code to test yourself.

Possible Bugs and Ideas for Solving Them

Let's envision a situation where an article type has the name “box”, and the website address is www.express-box.com, in this case the Url of the website will always contain “box”, and when we open the details page of the When we open the detail page of the box article type, all menu items will be added with a current menu class.

When comparing URLs, excluding the domain part of the URL can reduce the likelihood of this bug occurring. According to the structure of WordPress URLs, the post type slug is displayed immediately after the domain name, so we can use regular expressions to match the post type slug in the URL, and then compare it with the post type slug obtained from the post object.

In addition to the article type of the current article archive URL to add the current menu class, we can also be a similar method to the current article belongs to the category or custom taxonomy items to add the current menu class, time constraints, we do not test the corresponding code, free time to test and then fill in. If you have written the corresponding code, you can post it in the comments for your reference.