I have a website that uses a plugin that lets me add categories and tags to pages.

Is there a way of automatically changing the color of a menu item linked to all pages with a particular tag or category?

Specifically, I want to add the class "unwatched" to the menu item of any page that has been tagged with the "unwatched" tag.

I have tried the following code but I'm sure I've got it wrong: (it didn't work)

add_filter('nav_menu_css_class', 'custom_nav_menu_css_class', 10, 2 );

function custom_nav_menu_css_class( $classes, $item ) {
    if( 'tag' === $item->object ){
        array_push( $classes, 'unwatched' ); 
    }
    return $classes;    
}

I have a website that uses a plugin that lets me add categories and tags to pages.

Is there a way of automatically changing the color of a menu item linked to all pages with a particular tag or category?

Specifically, I want to add the class "unwatched" to the menu item of any page that has been tagged with the "unwatched" tag.

I have tried the following code but I'm sure I've got it wrong: (it didn't work)

add_filter('nav_menu_css_class', 'custom_nav_menu_css_class', 10, 2 );

function custom_nav_menu_css_class( $classes, $item ) {
    if( 'tag' === $item->object ){
        array_push( $classes, 'unwatched' ); 
    }
    return $classes;    
}

• menus
• tags

• It is probably a duplicate question. Here is the answer wordpress.stackexchange/a/109270/9821 – pixelngrain Commented Dec 24, 2019 at 2:44
• I don't want to have to manually add a class to individual menu items though; I'd like it to be done dynamically, depending on what categories or tags the page has – cobberas63 Commented Dec 24, 2019 at 2:50
• You may still use the code I referred to. Change the conditional statement to check with your taxonomy conditionally and add the CSS class to your menu item. Then use that class in CSS. If this is not enough then share what you have done till now. Without reference, no one would be able to help you. – pixelngrain Commented Dec 24, 2019 at 2:59
• Yes, I want to "Change the conditional statement to check with your taxonomy conditionally and add the CSS class to your menu item" - I want to add the class "unwatched" to the menu item of any page that has been tagged with the "unwatched" tagged. – cobberas63 Commented Dec 24, 2019 at 4:16

3 Answers 3

OK, got it :-)

add_filter( 'wp_nav_menu_objects', 'add_nav_menu_item_class' );

function add_nav_menu_item_class( $items ) {
    foreach ( $items as $item ) {
        $post_id = get_post_meta( $item->ID, '_menu_item_object_id', true );
        $post_tags = get_the_tags( $post_id );
        if ( $post_tags ) {
            foreach( $post_tags as $tag ) {
                if  ( $tag->name == 'unwatched' ) {
                    $item->classes[] = 'unwatched';
                }
            }
        }
    }
    return $items;
}

The associated CSS, which changes the color of all menu items tagged with the 'unwatched' class, is

li.unwatched > a {
    color: FORESTGREEN;
}

My next effort:

add_filter( 'wp_nav_menu_objects', 'add_nav_menu_item_class' );

function add_nav_menu_item_class( $items ) {
    foreach ( $items as $item ) {
        $post_tags = get_the_tags();
        if ( $post_tags ) {
            foreach( $post_tags as $tag ) {
                if  ( $tag->name == 'unwatched' ) {
                    $item->classes[] = 'unwatched';
                }
            }
        }
    }
    return $items;
}

This has an interesting effect - if the page I'm looking at has the 'unwatched' tag, ALL my menu items have the 'unwatched' class; conversely, if the page I'm looking at doesn't have the 'unwatched' tag, NONE of my menu items have the 'unwatched' class.

Maybe it's not possible to achieve this, but what I want is for the 'unwatched' class to be on every menu item linked to a page that has the 'unwatched' tag, and none of the others, regardless of which page I'm currently looking at.

Instead of using array_push() try using $item->classes[] = 'unwatched';

Although the more I look at it, where is your code checking if the tag is 'unwatched'?

You're pushing 'unwatched' into the classes array but your tag check isn't referencing it?

Is there more code that's not displayed here?

UPDATE Looking at your second effort I think I understand where the issue is... ...when a page is loaded you're checking to see if the tag is present for the page that is loaded by using 'get_the_tags()', you're not checking if all of the pages associated with the menu items have that tag. Since the result returns TRUE for that page, then the foreach adds the class to each.

What you need to do is, in the foreach, check the tags for each specific page/post ID and then add the class dependent on that. So within the foreach you'd need get_the_tags( $item->ID ). May need more work than just that to ensure you're getting the ID of each item, but I think that's the right way to go about doing applying the class.