Add custom data-attribute to WordPress navigation menu

3 Views

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:

Read More
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

Post Views: 3

Related posts

3 comments

  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

  2. At the end, I managed to solve this 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 data you need
    • Foreach loop to iterate trough the array
    • Inside that loop, loop trough the menu items
    • If the menu index is the same as the array index, append the array value as an attribute.

    Here’s a codepen example as well: http://codepen.io/NickHG/pen/GmKqqE

  3. Ok, too bad, I am sorry. I would post the code I’ve written for my icons but the code ist like 400 lines with the walker and stuff. But as it seems you’re using foundation, you should head over 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 absolutly explain every step needed to code it by hand. It works, I just tested it with my site by copy / pasting it.

    If you scroll down, you’ll see screenshots – they added an icon field (nearly like i did) how they did it and how they use it. After seeing this tut, honestly, I regret I made it all by myself. It was painfull – this tut just works like a charm….

Comments are closed.