Add class to link in wp_nav_menu

Marko Krstić
25 Jul 2022

By the default WP does not allow you to add class to link (“<a href=”>Link</a>”). If you are using tailwind with the Winden Plugin, you probably want to have it so you don’t need to target it with parent and write [&_a]:class.

1: Step: add this in functions.php

You can use Scripts Organizer and place under code block > everywhere

<?php

function add_additional_class_on_a($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

?>

2: Then use it like this in your theme, builder with PHP block or use Scripts Organizer to register as shortcode or Gutenberg Block

<?php
        // Show Menu here
        wp_nav_menu(array(
            'theme_location' => 'my-footer-menu',
            'container_id'    => '',
            'menu_class'      => 'footer-top list-unstyled',
            'menu_id'         => '',
            'add_a_class'     => 'bg-slate-200 text-black',
        ));
?>

Was this article helpful?

Tags

Categories

Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy