I know you can add a class in the custom menu options, but it adds it to the LI before the A. I want to apply the class directly to this specific A rather then the whole LI.

So instead of the output being

<li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

I want it too be like this.

<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

Any ideas?

7 s
7

you can use nav_menu_css_class filter

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(your condition){ //example: you can check value of $item to decide something...
        $classes[] = 'my_class';
    }
    return $classes;
}

Using this $item you can any condition you want.
and this will add the class to the specific li and you can style the a tag based on that like so:

.my_class a{
   background-color: #FFFFFF;
}

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *