If you’re dealing with a WordPress site where custom post types and menus play a crucial role, you might have encountered a common issue: ensuring that the correct parent menu item is highlighted when a user clicks on a post. In this guide, we’ll explore a scenario where a user wants the parent menu item to reflect the page they came from, providing a seamless user experience. The discussion revolves around a solution involving PHP and JavaScript. Let’s break it down into easy steps.

Understanding the Problem

User Dilemma: The user is facing an issue where the parent page of a post should be highlighted in the menu when the full post version is opened. They’ve partially addressed the problem by appending “?parent=” to the post links and using PHP to manipulate the menu classes.

The Partial Solution

The user has implemented a PHP filter to fix the menu parents based on the “parent” parameter in the URL. Here’s a snippet of the code:

add_filter('nav_menu_css_class', function($classes, $item, $args) {
    if (!isset($_GET['parent']) || empty($_GET['parent'])) return $classes;
    if ($item->object_id == $_GET['parent']) {
        $classes[] = "current_page_item";
        $classes[] = "current-menu-item";
    }
    return $classes;
}, 10, 3);

This solution works in most cases but fails when the parent is inside a submenu. The user has identified the need to add specific classes for submenu handling.

The JavaScript Workaround

To address the submenu issue, the user has employed a client-side JavaScript fix:

jQuery(function() {
    jQuery(".current-menu-item").parents("li").addClass("current-page-ancestor current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor");
});

.current-menu-parent a, .current-menu-ancestor a {
    color: #7dca8d;
}