Sridhar Katakam

Genesis and WordPress Tutorials

How to add custom attribute to a nav menu item in WordPress

by 20 Comments

Want to add a custom attribute like target="foobox" or data-featherlight="#enews-popup" to a specific nav menu item’s anchor?

nav_menu_link_attributes filter hook in WordPress is your friend.

For example, adding

/**
 * Add custom attribute and value to a nav menu item's anchor.
 *
 * @author Sridhar Katakam
 * @link   https://sridharkatakam.com/
 */
add_filter( 'nav_menu_link_attributes', function ( $atts, $item, $args ) {
    if ( 1161 === $item->ID ) { // change 1161 to the ID of your menu item.
        $atts['target'] = 'foobox';
    }

    return $atts;
}, 10, 3 );

in child theme’s functions.php will add target="foobox" to the menu item 1161’s a element.

Replace 1161 with the ID of your menu item. This can be obtained by inspecting it using Chrome’s Developer Tools.

Update on March 06, 2017:

Here’s a better version which does not rely on entering the menu item ID:

Simply assign a class to the menu item, say target-foobox like this:

and use this code:

/**
 * Add custom attribute and value to a nav menu item's anchor based on CSS class.
 *
 * @author Sridhar Katakam
 * @link   https://sridharkatakam.com/
 */
add_filter( 'nav_menu_link_attributes', function ( $atts, $item, $args ) {
    if ( 'target-foobox' === $item->classes[0] ) {
        $atts['target'] = 'foobox';
    }

    return $atts;
}, 10, 3 );

  • I have a follow on idea – make the code flexible by getting it to search $item->classes for certain classes and adding them to $atts[‘target’] if found.
    For example, if one of the classes is ‘target-foobox’ then set $atts[‘target’] = ‘foobox’.
    I’ll do up a gist tomorrow.

    Reply

  • Hi.

    Thanks for the Idea with the menu class!
    For my usecase I need to add different targets to different menu items, so I extended your code to check if the first css class contains “target” and then to use the part after “target-” as the target:

    add_filter( 'nav_menu_link_attributes', function ( $atts, $item, $args ) {
    if ( strpos($item->classes[0], 'target') !== false ) {
    $atts['target'] = str_replace('target-','',$item->classes[0]);
    }

    return $atts;

    }, 10, 3 );

    Reply

  • It’s funny how I was searching for an hour how to do this and then found it on your site, explained so great and it worked perfectly in my first try – thanks!

    Reply

  • Do you know how I can make this work with my custom Walker? It works with the default one, but as soon as I activate my custom walker it stops working 🙁

    Reply

  • add_filter( ‘nav_menu_link_attributes’, function ( $atts, $item, $args ) {
    $menuItems = $item->classes;
    if ( strpos($menuItems[0], ‘toggle’) !== false ) {
    foreach( $menuItems as $menuItem ){
    if(substr($menuItem , 0, 5) === ‘data-‘){
    $prefix = strtok( $menuItem, ‘_’ );
    $suffix = strtok( ” );
    $atts[$prefix] = $suffix;
    }
    }
    }

    return $atts;

    }, 10, 3 );

    Menu classes to be added ( toggle data-toggle_collapse data-_ ) on wordpress menu

    this will add all the data attributes to the menu

    Reply

  • Is it possible, to use Oxygen Builder’s Mega Menu element (Composite), and trigger it with a regular WordPress menu element? So I don’t need to use the “oxel_megamenu_parent” classed button? I would use it like this because I would like to use several mega menus, and It is easier to have a simple menu element (for mobile usage reasons).

    Thanks for the help

    Reply
    • >