The nav menu link attributes filter allows themers and developers full control over what HTML attributes are added to menus generated with the WP Menu API.
This filter runs per nav item, vs providing a list of all nav elements at once.
When the 'nav menu link attributes' filter is called, it is passed three parameters:
add_filter( 'nav_menu_link_attributes', 'filter_function_name', 10, 3 );
function filter_function_name( $atts, $item, $args ) {
// Manipulate attributes
return $atts;
}
Where 'filter_function_name' is the function WordPress should call when filter is run. Note that the filter function must return a value after it is finished processing or the result will be empty.
filter_function_name should be unique function name. It cannot match any other function name already declared.
The following example adds an attribute to all <a> tags in the wp_nav_menu
function add_menu_atts( $atts, $item, $args ) {
$atts['onClick'] = 'return true';
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_atts', 10, 3 );
The following example adds an attribute to specific menu items (34 and 39). Specify the ID of each menu item as an array.
function add_specific_menu_atts( $atts, $item, $args ) {
$menu_items = array(34,39);
if (in_array($item->ID, $menu_items)) {
$atts['onClick'] = 'return false';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_atts', 10, 3 );
In the simplest instance above, the filter adds the attribute to all menu items of all menus. In case you only want to add the attributes to a certain menu location, you can check for menu location in the $args.
The following function adds a class attribute to all <a> tags in a particular menu location ('primary')
function add_specific_menu_location_atts( $atts, $item, $args ) {
// check if the item is in the primary menu
if( $args->theme_location == 'primary' ) {
// add the desired attributes:
$atts['class'] = 'menu-link-class';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );
The following function adds a class to all menu items that have "Open link in a new window/tab" checked in the menu options.
function add_class_to_target_blank_menu_items( $atts, $item, $args ) {
// check if the item is set to target="_blank"
if ( $item->target == '_blank' ) {
// add the desired attributes:
$atts['class'] = 'target-blank';
}
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_target_blank_menu_items', 10, 3 );