Home Ask Login Register

Developers Planet

Your answer is one click away!

Nick February 2016

Add custom data-attribute to Wordpress navigation menu

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>

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

any advice?



ThomasB February 2016

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

ThomasB February 2016

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....

Post Status

Asked in February 2016
Viewed 3,356 times
Voted 9
Answered 2 times


Leave an answer

Quote of the day: live life