Add custom data attribute to Wordpress navigation menu

Question

I saw some similar questions here in stackoverflow, but mine is a little different.

I need to add a custom data attribute to a Wordpress menu. The problem is that all the solutions that I found, for example, are the following:

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 ​​for each item in the list.

This is pretty much what I need to achieve:

 <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

In the end, I managed to solve this problem using javascript.

This is what I did:

 (function() { var arrayList, key, val; arrayList = ['first', 'second', 'third', 'fourth']; for (key in arrayList) {if (window.CP.shouldStopExecution(1)){break;} val = arrayList[key]; console.log("key is " + key + " and val is " + val); $('li').each(function(index) { if (parseInt(index) === parseInt(key)) { return $(this).attr('data-anchor', val); } }); } window.CP.exitedLoop(1); }).call(this); 

• Create an array with the required data
• Foreach loop to iterate over an array
• Inside this loop, loop through the menu items
• If the menu index matches the index of the array, add the value of the array as an attribute.

An example codepen is also provided here: http://codepen.io/NickHG/pen/GmKqqE

Answer 2

I guess the solution would be to expand the navigation elements. I have done this before to add icons to menu items.

Take a look here - instead of subtitling you can name the field "anchorarget" (or something 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

Answer 3

Good, too bad, sorry. I would post the code that I wrote for my badges, but the code ist 400 lines with a walker and stuff. But, as you think, you are using the foundation, you should go here → https://www.smashingmagazine.com/2015/10/customize-tree-like-data-structures-wordpress-walker-class/

Even if you don’t know about php or wordpress hooks, this tutorial will fully explain each step required to manually encode it. It works, I just tested it on my website by copying it / paste.

If you scroll down, you will see screenshots - they added an icon field (almost like me), how they did it and how they use it. Seeing this, to be honest, I'm sorry that I did all this myself. It hurt - it just works like a charm ....