• When I am in the shop page of my website, the shop link in the navigation is given the css class ‘current-menu-item’. The problem is that any page with the word ‘product’ in the permalink is also given the class ‘current-menu-item’ in the navigation along with the shop page. This results in two links in the navigation having the ‘current-menu-item’ class. This class changes the color of the link in the navigation and functions similar to the ‘:active’ pseudo-class in css. This only happens when I am in the shop page of my website. I’m not sure if this issue is caused by WordPress or by the theme I bought.

    • This topic was modified 7 years, 6 months ago by bhavikfp.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Can you share a link to an example? Are the links with ‘product’ in them unrelated to the shop, or are they links to Products or Product Categories generated by the same plugin (presumably WooCommerce)?

    Thread Starter bhavikfp

    (@bhavikfp)

    The page with ‘product’ in the permalink is unrelated to the Products and the Product Categories. The shop page is from the woocommerce plugin.

    When I was trying to get to the root of the problem, I changed the page title and permalink to see if anything would change. Nothing changed in the navigation when I changed the page title but when I removed the word ‘product’ from the permalink in the page, then linked the page to the navigation in Appearance > Menus, and then refreshed, the color changed back to how it should be and there was now only one link with the class ‘current-menu-item’ as it should be. So to conclude, the word ‘product’ in the permalink is causing wordpress to add the ‘current-menu-list’ class to this link in the navigation.

    I’m not able to replicate the issue with just WooCommerce on its own, so it sounds like something your theme is doing. You’ll probably need to contact its developers for support.

    Thread Starter bhavikfp

    (@bhavikfp)

    Yes it is my theme doing this. The following code in the functions.php of the theme is causing it to do that.

    add_action('nav_menu_css_class', 'add_current_nav_class', 10, 2 );
    
    function add_current_nav_class($classes, $item) {
    
        // Getting the current post details
        global $post;
    
        if ( isset($post->ID) ) {
    
            // Getting the post type of the current post
            $current_post_type = get_post_type_object(get_post_type($post->ID));
            $current_post_type_slug = $current_post_type->rewrite['slug'];
    
            // Getting the URL of the menu item
            $menu_slug = strtolower(trim($item->url));
    
            // If the menu item URL contains the current post types slug add the current-menu-item class
            if (strpos($menu_slug,$current_post_type_slug) !== false) {
    
               $classes[] = 'current-menu-item';
    
            }
    
        }
    
        // Return the corrected set of classes to be added to the menu item
        return $classes;
    
    }

    How can I make edits to the child themes functions.php? I can add && $current_post_type_slug !== 'product' to the last if statement (in the code above) in the parent themes functions.php which solves the problem but this will get overwritten by the theme updates so I’d like to add it to the child theme’s functions.php or any other method I’m not aware of.

    • This reply was modified 7 years, 6 months ago by bhavikfp.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Page with ‘product’ in permalink is active in nav when in shop page’ is closed to new replies.