WordPress - How to add class to top level nav links only

Question

I am trying to create the following menu in WordPress:

So far this is what I've come up with...

The menu itself embedded in my header.php

 'primary-menu',
    'menu' => 'primary-menu',
    'container' => false,
    'container_class' => false,
    'container_id' => false,
    'menu_class' => 'nav navbar-nav navbar-right',
    'menu_id' => false,
    'depth' => 0,));
?>

My functions.php page

//Load Custom Menu Navigation
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( 'Primary Menu' ),
        )
    );
}

//Clean up Custom Menu by Removing Unecessary Tags
add_filter( 'nav_menu_item_id', 'wp_nav_menu_attributes_filter', 100, 1 );
add_filter( 'page_css_class', 'wp_nav_menu_attributes_filter', 100, 1 );
add_action( 'init', 'wp_nav_menu_attributes_filter' );
function wp_nav_menu_attributes_filter( $var ) {
    return is_array( $var ) ? array_intersect( $var, array( 'current-menu-item' ) ) : '';
}

//Remove Unecessary  Classes
add_filter( 'nav_menu_css_class', 'my_nav_menu_css_class' );
function my_nav_menu_css_class( $classes ) {
    $custom_classes = array();

    foreach ( $classes as $class ) {

        if ( $class == 'menu-item' ) {
            return $custom_classes;
        }
        $custom_classes[] = $class;
    }
}

//Add Custom Class to Navigation  Tags
add_filter( 'nav_menu_link_attributes', 'add_class_anchor_nav_primary', 10, 3 );
function add_class_anchor_nav_primary( $atts, $item, $args ) {
    //Check for Location of Menu
    if ( $args->theme_location == 'primary-menu' ) {
        // Add the Class
        $atts['class'] = 'dropdown submenu';
    }

    return $atts;
}

This is adding the classes to every tag while I only need them to be on the first layer of links and not the submenu items that dropdown. Any input would be greatly appreciated, TIA!

user_10515503 · Answer

The problem is that the primary-menu is the complete top menu so this can't work for your menu items. Try this instead:

add_filter( 'nav_menu_link_attributes', 'add_class_anchor_nav_primary', 10, 3 );
function add_class_anchor_nav_primary( $atts, $item, $args ) {
    if ( (int) $item->menu_item_parent === 0 ) {
        $class         = 'dropdown submenu';
        $atts['class'] = $class;
    }

    return $atts;
}

This will add your class to all main links excluding the dropdown links. It works because we're checking if the given item has a parent or not. If not (=== 0), we can say, that this is a non-dropdown link. I've tested it and it works.

WordPress - How to add class to top level nav links only

1 Answers