0

I have a problem with the primary nav on a WP i'm developping on local with Wamp. Searched for a solution during hours but without success. Here is my code:

HTML (php)

<div id="primary-nav" class="primary-nav-container" role="navigation">
    <ul id="primary-menu" class="sf-menu primary-menu">
        <li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-8"><a href="http://localhost/sw/">HOME</a></li>
        <li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="http://localhost/sw/articles/">Articles</a></li>
        <li id="menu-item-339" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-339"><a href="http://localhost/sw/blog/">Blog</a></li>
        <li id="menu-item-437" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-437"><a href="http://localhost/sw/forum/">Forum</a></li>
    </ul>   
</div>

CSS highlight

.primary-menu > li > a:hover,
.primary-menu > .current-menu-item > a,
.primary-menu > .sfHover > a {
    border-bottom: 5px solid #ddff34;
    color: #fff;
}

I've created a custom page for each category (Articles and Blog) which contain a list of posts, and also a custom page with forum category list. Each menu item is highlighted with the current-menu-item class and it's working well when I call Articles, blog or forum custom page. But when I open a post listed on the pages, which are associated with the category, or when I open a forum thread, the menu item lose his highlight property current-menu-item.

I've tried many approaches found on Google but nothing seems to work for me... probable because I'm not very familiar with JS and PHP so I'm missing something :p

Any help will be much appreciated.

3 Answers 3

0

Pretty horrible this stuff is not supported out of the box in wordpress. I didn't like the solutions here because of the hardcoded menu item names.

Only prerequisite is that the category must be present in the URL, so change that in your permalinks in the settings.

Make modifications to make it apply to your theme HTML structure but general idea is the same:

function highLightMenu() {

    let url = window.location.href;
    let elements = document.getElementsByClassName("menu-item");
    
    for(let i=0; i<elements.length; i++) { 

        let element = elements[i];
        if(!element || !element.innerText) {
            continue;
        }
        // Wordpress converts menus to lowercase and separated by - symbol. "Case studies" turns to "case-studies"
        let title = element.innerText.toLowerCase();
        title = title.replaceAll(" ", "-");
        
        console.log(url + " indexOf " + title);
        if (url.indexOf(title) > -1) {
            // Replace with your highlight class
            elements[i].classList.add("current-menu-item");
        } 

    }
    
}
highLightMenu();
1
  • It's reasonable that categories not be identified as the current menu item when viewing a post because, well, it's not the current menu item, the post is.
    – Caleb
    Aug 7 at 16:28
0

The nav_menu_css_class filter can be used to add CSS classes to list items, so add in the necessary logic, and then add the class (tested):

add_filter( 'nav_menu_css_class', static function ( $classes, $menu_item ) {
    // Add class if post is assigned to category in nav menu.
    if ( 'taxonomy' === $menu_item->type && 'category' === $menu_item->object && in_category( $menu_item->object_id ) ) {
        $classes[] = 'current-menu-item';
    }

    return $classes;
}, 10, 2 );
-1

Yes! Found a solution which is working fine for my case :)

if(window.location.href.indexOf("/blog/") > -1) {
   $('#menu-item-339').addClass('current-menu-item');
}
if(window.location.href.indexOf("/articles/") > -1) {
   $('#menu-item-241').addClass('current-menu-item');
}
if(window.location.href.indexOf("/forum/") > -1) {
   $('#menu-item-437').addClass('current-menu-item');
}

Solution found here

1
  • As mentioned by Ectizoi, this solution may work for the OP, but it requires hard-coding the IDs, which may change at any time and is not usable by others. Additionally, because it uses JavaScript there may be delays or may not apply at all.
    – Caleb
    Aug 7 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.