Using WordPress ‘nav_menu_link_attributes’ PHP filter

by

The nav_menu_link_attributes is a WordPress PHP filter that allows developers to modify the HTML attributes applied to a menu item’s anchor element.

This filter is called whenever a menu item is rendered, allowing developers to customize the attributes of the menu item’s link.

Usage

Here is a basic example of how to use the nav_menu_link_attributes filter:

function custom_menu_link_attributes( $atts, $item, $args ) {
  // your custom code here
  return $atts;
}

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

In this example, we define a function called custom_menu_link_attributes that takes three parameters: $atts, $item, and $args. This function is then added to the nav_menu_link_attributes filter using the add_filter function.

The custom_menu_link_attributes function should modify the $atts array as necessary and then return it. The modifications made to $atts will then be applied to the menu item’s anchor element.

Parameters

The nav_menu_link_attributes filter takes several parameters that developers can use to customize the menu item’s attributes:

  • $atts (array): The HTML attributes applied to the menu item’s anchor element, empty strings are ignored.
  • $item (WP_Post): The current menu item object.
  • $args (stdClass): An object of wp_nav_menu() arguments.

Additional arguments from wp_nav_menu() include:

  • $title (string): Title attribute.
  • $target (string): Target attribute.
  • $rel (string): The rel attribute.
  • $href (string): The href attribute.
  • $aria_current (string): The aria-current attribute.
  • $menu_item (WP_Post): The current menu item object.
  • $depth (int): Depth of menu item. Used for padding.

Examples

Here are some practical examples of how to use the nav_menu_link_attributes filter:

function add_custom_class_to_menu_item_links( $atts, $item, $args ) {
  $atts['class'] = 'my-custom-class';
  return $atts;
}

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

In this example, we define a function that adds the class my-custom-class to the menu item’s anchor element.

function remove_title_attribute_from_menu_item_links( $atts, $item, $args ) {
  $atts['title'] = '';
  return $atts;
}

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

In this example, we define a function that removes the title attribute from the menu item’s anchor element.

function open_menu_item_links_in_new_window( $atts, $item, $args ) {
  $atts['target'] = '_blank';
  return $atts;
}

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

In this example, we define a function that opens the menu item’s anchor element in a new window.

function add_data_attribute_to_menu_item_links( $atts, $item, $args ) {
$atts['data-my-attribute'] = 'my-value'; return $atts; }
add_filter( 'nav_menu_link_attributes', 'add_data_attribute_to_menu_item_links', 10, 3 );

In this example, we define a function that adds a custom data attribute (`data-my-attribute`) to the menu item’s anchor element.

function customize_menu_item_links_based_on_location( $atts, $item, $args ) {
if ( $args->theme_location == 'primary-menu' ) {
// Add a class to menu items in the "primary-menu" location
$atts['class'] = 'primary-menu-item';
} else {
// Add a class to menu items in other menu locations
$atts['class'] = 'other-menu-item';
}
return $atts;
}

add_filter( ‘nav_menu_link_attributes’, ‘customize_menu_item_links_based_on_location’, 10, 3 );

Add a custom class to menu items

function add_custom_class_to_menu_items($atts, $item, $args, $depth) {
    $atts['class'] = 'custom-class';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_custom_class_to_menu_items', 10, 4);

This code adds a custom class named ‘custom-class’ to all menu items.

function add_nofollow_to_external_links($atts, $item, $args, $depth) {
    if (strpos($atts['href'], home_url()) === false) {
        $atts['rel'] = 'nofollow';
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_nofollow_to_external_links', 10, 4);

This code adds a ‘nofollow’ attribute to all external links in the menu.

Add a ‘data-depth’ attribute to menu items

function add_data_depth_attribute($atts, $item, $args, $depth) {
    $atts['data-depth'] = $depth;
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_data_depth_attribute', 10, 4);

This code adds a ‘data-depth’ attribute to all menu items, showing the depth of the item in the menu hierarchy.

Set target attribute to ‘_blank’ for external links

function open_external_links_in_new_tab($atts, $item, $args, $depth) {
    if (strpos($atts['href'], home_url()) === false) {
        $atts['target'] = '_blank';
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'open_external_links_in_new_tab', 10, 4);

This code sets the target attribute to ‘_blank’ for external links, so they open in a new tab.

Add ‘aria-label’ attribute to menu items for accessibility

function add_aria_label_to_menu_items($atts, $item, $args, $depth) {
    $atts['aria-label'] = esc_attr($item->title);
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_aria_label_to_menu_items', 10, 4);

This code adds an ‘aria-label’ attribute to all menu items for improved accessibility, using the item’s title as the label.