How to Add Custom attributes in WordPress Nav Menu

There comes a time when you want to add custom attributes in WordPress nav menu. For instance, you may want one of your menus differently displayed than others.One day my client wanted me to add Bootstrap Tooltip feature on two of the nav menus on her site. Well, I knew it was possible but it was a new challenge to me. However, I found the right solution via different WordPress Forums (Thanks to googling) within few hours of research. I just felt like writing this simple trick to share with you if you encounter such complication in the future.

What is Navigation Menu in WordPress ?

Navigation Menu in WordPress is a  simple WordPress theme feature which allows admin users to create dynamic navigation menus by using a built-in Menu Editor located in WordPress admin dashboard area under Appearance » Menus section. The navigation menu was officially introduced in WordPress 3.0 version. Since then, it has developed a lot. In short, a navigation menu in a website is where links to other pages on the website are displayed.

The navigation menus allow the theme developers and designers to let users create their own custom menus of their own. By default, menu in WordPress will just list current Pages. WordPress however, supports different menus so that they can be placed in different sections of the page on a single website (e.g. header and footer menus). Users can even add Custom Links, Pages links, and Posts links to a menu using simple drag and drop functionality. The admin user can even add custom CSS classes to transform boring menu to good looking Menu bar using stylesheets.

Ok, let’s start.


Add Custom attributes in WordPress Nav Menu


Let’s say our menu looks like this when we view in static HTML:

<ul>
  <li id="menu-item-10">
    <a href="http://prabinparajuli.com.np/about/">About</a>
  </li>
</ul>

Now, I want to add some attributes to nav menu “About” only.

<ul>
  <li id="menu-item-10">
    <a href="http://prabinparajuli.com.np/about/" class="highlight" data-toggle="tooltip" data-original-title="About">About</a>
  </li>
</ul>

In the above code, I’ve added class="highlight" data-toggle="tooltip" data-original-title="About" attributes


Add the following code in your theme’s Functions.php to display the attributes as above in dynamic WordPress menu.

add_filter( 'nav_menu_link_attributes', 'about_nav_menu_attributes', 10, 3 );
function about_nav_menu_attributes( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 10;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['class'] = 'highlight';
    $atts['data-toggle'] = 'tooltip';
    $atts['data-original-title'] ='about';
  }
return $atts;
}

Here, nav_menu_link_attributes filter hook is used to control over the menu attributes in the menu.  In $menu_target = 10, the number 10 is the ID of the menu. And the other attributes are added in the About menu.


Now, we’ve finally added Custom Attributes in Navigation menu in WordPress.  Simple as 1, 2 , 3 . Isn’t it ? You can also do various tricks on your WordPress menu like making Image Menu as a Navigation menu, redirecting to the new menu when a specific menu is being clicked, change the TAB names on the navigation menu, styling or coloring of the menus, and many more. We’ll do some of the WordPress Navigation menu tricks in the next article. For now, feel free to Comment below if you have any question. Happy WordPress Nav Menu !!

Credits