Add class to anchors in WordPress Menus

Question

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

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'
) );
?>

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?

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

csknk · Accepted Answer · 2017-03-24T10:21:50.500

49

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 );

edited Mar 24 '17 at 10:21

answered Mar 24 '17 at 09:55

csknk

1,899
1
16
27

those filters doesn't appear in wordpress' filter hooks reference: https://codex.wordpress.org/Plugin_API/Filter_Reference. Sure they exist? – Ruben Marrero Mar 24 '17 at 11:17
nav_menu_link_attributes has worked, I haven't yet tried nav_menu_css_class – TimothyAURA Mar 24 '17 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 Mar 24 '17 at 11:46
Glad it worked @TimothyAURA, please consider marking the answer correct. – csknk Mar 24 '17 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. – Ruben Marrero Mar 24 '17 at 11:48
My thoughts exactly! – csknk Mar 24 '17 at 11:48
DavidCara: feel free to /msg stobrendo through freenode :). (Its me). – Ruben Marrero Mar 24 '17 at 11:50
The problem with this, for me, is, it seems to *remove* classes WordPress is itself applying, like "active", which means I cannot style for the active menu item. – Robert Andrews Jul 18 '18 at 10:02
Would there be a way to get/set a value for $atts['class'] from wp_nav_menu $arg, rather than hard-coding it ? – klewis Jan 08 '19 at 22:38
Exactly what i was looking for. Thanks Mate. – Dushan Aug 28 '19 at 06:32
I have a better solution here. https://stackoverflow.com/a/67859550/9207553 – Mohammad Ayoub Khan Jun 06 '21 at 13:19
I have a better solution here. https://stackoverflow.com/a/67859550/9207553 – Mohammad Ayoub Khan Jun 06 '21 at 13:19
Care this answer is BAD, the other answer by Lars Flieger is not hard coded and thus a way better solution than this! – Branchverse Dec 05 '21 at 21:29

score 14 · Answer 2 · answered Dec 13 '20 at 15:33

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);

Fusion · Answer 3 · 2019-06-17T18:00:26.100

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 );

score 0 · Answer 4 · answered Mar 24 '17 at 09:47

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.

not a good solution. I have a much better solution here. https://stackoverflow.com/a/67859550/9207553 — Mohammad Ayoub Khan, Jun 06 '21 at 13:38

score 0 · Answer 5 · answered Jul 12 '21 at 12:42

If you want to add a class in anchor tag for a specific menu then can use following steps

Step-1: add this in functions.php

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

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

Step-2:- use it like this in your theme

<?php
    // Show Menu here
    wp_nav_menu(array(
        'theme_location' => 'my-menu',
        'menu_class'      => 'footer-top',
        'add_a_class'     => 'nav-link',
    ));
?>

nope, copy/paste from other answers. – DrLightman Mar 01 '23 at 09:33 — DrLightman, Mar 01 '23 at 09:33

Add class to anchors in WordPress Menus

5 Answers5

Filter menu list items

Linked