Add custom data-attribute to Wordpress navigation menu

Question

I've seen some similar questions here on stackoverflow, but mine is a bit different..

I need to be able to add custom data attribute to wordpress menu. The problem i've got is that all the solutions i found, like the following, for example:

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'] = 'myModal';
  }
  return $atts;
}

allows you to add the same attribute to all menu items. What i need, is actually a way to add the same data attribute, but with different values on each element on the list.

this is pretty much what i need to achive:

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

because i need to use this plugin here: https://github.com/alvarotrigo/fullPage.js#fullpagejs

any advice?

Thanks

Answer 1

I guess the solution would be to extend the navigation items. I made this before to add icons to menu items.

Take a look over here - instead of a subheadline you cann name the field "anchortarget" (or anything else) and call it in your menu... http://www.wpexplorer.com/adding-custom-attributes-to-wordpress-menus/

If you need further hints, you should google for "wordpress + menu + custom field".

Hope this helps you. All the best