How can I add custom class to a link in the navigation menu after attaching it to a widget?


I added a widget called “Footer-1” by adding the following code to my functions.php class

        'name'          => esc_html__( 'Footer Column 1', 'wp-bootstrap-starter' ),
        'id'            => 'footer-1',
        'description'   => esc_html__( 'Add widgets here.', 'wp-bootstrap-starter' ),
        'before_widget' => '<div id="%1$s" class="col-12 col-md-6 col-lg-4 widget %2$s">',
        'class'         => 'wt222',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="text-light">',
        'after_title'   => '</h3>',

Then I added a menu called “policies” to the footer one. It is showing up correctly. However, I want to add a css-class “text-light” to each link in the menu items.

I tried adding it using the nav_menu_link_attributes filter. But it does not seems to work when the menu is attached to a widget. If I injected the menu using wp_nav_menu(['theme_location'=> 'priorities']) menu the class gets added. However, when I attach the same menu to the widget it does not add the class.

add_filter( 'nav_menu_link_attributes', 'menu_add_class', 10, 3 );

// Adds text-light class to each link in the policies menu
function menu_add_class( $atts, $item, $args ) {

    if($args->theme_location === 'policies') {
        $atts['class'] = 'text-light';
    return $atts;

How can I correctly add the css-class to each link in the menu?

Jay 4 months 0 Answers 12 views 0

Leave an answer