Add Custom attributes WordPress nav item

5 comments

1. Filter this, targetting a specific menu id is fairly easy:

   Add the following to your functions.php file.

   add_filter( 'nav_menu_link_attributes', 'my_nav_menu_attribs', 10, 3 );
   function my_nav_menu_attribs( $atts, $item, $args )
   {
     // The ID of the target menu item
     $menu_target = 365;
   
     // inspect $item
     if ($item->ID == $menu_target) {
       $atts['data-reveal-id'] = 'myModal1';
       $atts['data-animation'] = 'fade';
     }
     return $atts;
   }
   

   Log in to Reply

2. <?php
   
   $defaults = array(
       'theme_location'  => '',
       'menu'            => '',
       'container'       => 'div',
       'container_class' => '',
       'container_id'    => '',
       'menu_class'      => 'menu',
       'menu_id'         => '',
       'echo'            => true,
       'fallback_cb'     => 'wp_page_menu',
       'before'          => '',
       'after'           => '',
       'link_before'     => '',
       'link_after'      => '',
       'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
       'depth'           => 0,
       'walker'          => ''
   );
   
   wp_nav_menu( $defaults );
   
   ?>
   

   Log in to Reply

3. Have you heard about Walker_Nav_Menu concept in WordPress?

   here is an example, http://www.wpexplorer.com/adding-custom-attributes-to-wordpress-menus/

   Log in to Reply

4. For WordPress functions.php

   If you need to add attributes to more than one menu item:

   function add_specific_menu_atts( $atts, $item, $args ) {
   
   $menu_items = array(66,72);
   
   if (in_array($item->ID, $menu_items)) {
      $atts['data-ps2id-offset'] = '-75';
   }
   
   return $atts;
   }
   add_filter( 'nav_menu_link_attributes', 'add_specific_menu_atts', 10, 3 );
   

   Log in to Reply

5. Use jquery.

   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script type="text/javascript">
   
       $(document).ready(function() {
           $('#menu-item-365').find('a').attr('data-reveal-id', 'myModal1');
           $('#menu-item-365').find('a').attr('data-animation', 'fade');
       });
   </script>
   

   Log in to Reply