Change WordPress wp_nav_menu link classes

Question

I'm currently trying to figure out, how I can add a class to the wp_nav_menu links <a>. I can always found question and tutorials how I can change the <li> or <ul> class of the generator, but nothing about the link <a> classes.

This is my little piece of code:

<div class="navbar">
    <ul>
        <li><a class="add-class-here" href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
    </ul>
</div>

As you can see, I want to add a class to the <a> (link) element. How the hack can I do this?

You have the code right there! This is exactly how you would do this. If you want custom classes with a dynamic wordpress menu: read this. This is how you would manually add classes to wordpress menu items. Instead of selecting .add-class-here you would have to select .add-class-here a, since the article I sent adds a class to the <li> element — Derk Jan Speelman

Mr. Jo Mr. Jo · Accepted Answer · 2019-03-26T14:29:37

Found my answer. Maybe I was a bit to fast asking a new one:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 3 );
function nav_menu_link_class( $atts, $item, $args ) {
    $class         = 'has-ripple';
    $atts['class'] = $class;

    return $atts;
}

So this is how I've added a ripple class to all of my link object. Looks cool now!

Change WordPress wp_nav_menu link classes

1 Answers