0

I'm trying to add a custom data attribute to the <a> element. What I'm trying to do is integrate the navigation effect in this CodePen

I can do all the CSS but I need to add the HTML part such as below:

   <ul class="snip1226">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>

How and where would I add this into WordPress? What would I need to edit to add this HTML functionally?

Thanks,

Harvey

0

If you want to add a custom data attributes to the menu that's generated by wp_nav_menu function. You can use the nav_menu_link_attributes filter to add the desired attributes to the <a> elements.

function add_menu_atts( $atts, $item, $args ) {
    $atts['data-hover'] = $atts['title']; // add data-hover attribute

    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_atts', 10, 3 );
| improve this answer | |
  • Okay thank you, I will give that a go. Should adding this work just like how the HTML would work? – Harvey Feb 17 '18 at 21:07
  • @Harvey that would work as the CodePen example, however please update the CSS to match the selectors generated by wp_nav_menu. For example: the current class to mark the active <li> element, in WordPress that would be current-menu-item – Den Isahac Feb 17 '18 at 22:23
  • Okay that’s what I’ve been doing so will give it a try this morning :) – Harvey Feb 18 '18 at 8:28
  • Hi, I have added the above code into the functions.php of the child theme which I think is correct? Then I have edited the CSS selector to be '.main-navigation ul.menu' I tired replacing the sector with the current-menu-item but didnt get any of it working – Harvey Feb 18 '18 at 9:05
  • I have just uploaded the site, sorry if it is slow as its in early development derbyshiregas.co.uk – Harvey Feb 18 '18 at 9:42
0

You can also try:

/*
 * Add filter attribute 
 */

add_filter( 'walker_nav_menu_start_el', 'modify_walker_data_attr', 10, 4);

function modify_walker_data_attr( $item_output, $item, $depth, $args )
{

    // I use ACF for adding field to a menu item
    // https://www.advancedcustomfields.com/resources/adding-fields-menu-items/
    $data_hover = get_field('data-hover', $item);

    $old = '<a';
    $new = '<a data-hover="'.$data_hover.'" ';

    $item_output = str_replace($old, $new, $item_output);

    return $item_output;
}
| improve this answer | |
  • get_field() is not a WordPress function. It requires the plugin Advanced Custom Fields. – fuxia Nov 22 '19 at 12:06
  • Yes, as i wrote in my post ;) but you can use whatever you want. Just use print_r(); I use ACF cause i add a text field to my menu item to set the content what i want per item – user1551496 Nov 23 '19 at 14:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.