17

I'm trying to add the standard Bootstrap nav-link class to the anchors rendered by the WordPress menu.

  1. I can pass variables to the wp_nav_menu() which applies a class to the menu (and remove the containing):

    <?php wp_nav_menu(array(
        'theme_location' => 'header-menu',
        'menu_class' => 'navbar-nav',
        'container' => 'false'
    ) );
    ?>
    
  2. I then use the WordPress Appearances > Menu UI to apply nav-item class to <li> tags.

How do I apply a class to the WordPress menu anchor tags?

1
  • To avoid adding classes in the menu UI you can use the 'nav_menu_css_class'. I'll add this to my answer...
    – csknk
    Commented Mar 24, 2017 at 10:09

4 Answers 4

50

You can do what you need with the WP nav_menu_link_attributes hook:

add_filter( 'nav_menu_link_attributes', function($atts) {
        $atts['class'] = "nav-link";
        return $atts;
}, 100, 1 );

...or if you don't like closures:

function add_link_atts($atts) {
  $atts['class'] = "nav-link";
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

Filter menu list items

To avoid using the WordPress menu UI to add classes to the menu list items, you can take advantage of the 'nav_menu_css_class' filter:

add_filter( 'nav_menu_css_class', function($classes) {
    $classes[] = 'nav-item';
    return $classes;
}, 10, 1 );
13
  • those filters doesn't appear in wordpress' filter hooks reference: codex.wordpress.org/Plugin_API/Filter_Reference. Sure they exist? Commented Mar 24, 2017 at 11:17
  • nav_menu_link_attributes has worked, I haven't yet tried nav_menu_css_class Commented Mar 24, 2017 at 11:21
  • 2
    @127.0.0.1 Yep, they exist! Check out wp-includes/class-walker-nav-menu.php lines 136 and 179
    – csknk
    Commented Mar 24, 2017 at 11:46
  • Glad it worked @TimothyAURA, please consider marking the answer correct.
    – csknk
    Commented Mar 24, 2017 at 11:47
  • Ok thanks, i'll look after work. If they do count with my upvote. Its nice to have such things, although they not always are documented :( --EDIT: Ok, i'll take TimothyAURA's word. Commented Mar 24, 2017 at 11:48
15

If you have multiple menus over your site or just want to be flexible. You can extend the wp_nav_menu build-in function:

Just add add_a_class to your wp_nav_menu function:

wp_nav_menu(
    array(
        'theme_location'  => 'primary',
        'depth'           => 2,
        'container'       => 'div',
        'add_a_class'     => 'class1 class2',
        'fallback_cb'     => false,
    )
);

Add the following code in your functions.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

This allows you to add classes ONLY to anchors of SPECIFIC MENU. Just add your classes into $menuClassMap values below.

    function mytheme__menu_anchors_add_css( $atts, $item, $args ) {

        $menuClassMap = [
            'navbar-menu' => 'my-footer-menu-link-class',
            'footer-menu' => 'my-footer-menu-link-class',
        ];

        $additionalClassName = $menuClassMap[$args->menu->slug] ?? '';

        if($additionalClassName){
            if(!array_key_exists('class', $atts)){
                $atts['class'] = '';
            }
            $classList = explode (' ' , $atts['class']);
            $classList[] = $additionalClassName;
            $atts['class'] = implode (' ' , $classList);
        }
        return $atts;

    }

    add_filter( 'nav_menu_link_attributes', 'mytheme__menu_anchors_add_css', 10, 3 );
0

wp_nav_menu()'s parameters wont allow you to add a class to your links with default's functionality. It would allow you to enclose your <a href="#"></a> within any html like <span class="wrapped-anchor"><a href="#"></a></span> if you use :

<?php 
   $parameters = TimothyAURA->set_specific_parameters_you_want(); // i mean, realy fullfill the array with the options you want based on the docs.
   $parameters['before'] = '<span class="wrapped-anchor">';
   $parameters['after'] = '</span>';
   wp_nav_menu($parameters);

In case you really need to set a class for your anchors you would have to pass a Walker object. You would need to read and understand this specific docs about it, though.

1

Your Answer

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

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