0

I would a data attribute to the a tag in the menu, like have <a href="#example" data-attribute="attribute">CLICK</a>

I know that I have to extend the Walker BUT I tried in several times (finding some code on internet) and I never made it work.

Here the code (I've still not tried to insert the data-attribute because before I would make the menu works.) CODE:

/* WALKER */
wp_nav_menu( array(
 'container' =>false,
 'menu_class' => 'nav',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'walker' => new description_walker())
 );
 class description_walker extends Walker_Nav_Menu
{
      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

           $class_names = $value = '';

           $classes = empty( $item->classes ) ? array() : (array) $item->classes;

           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';

           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

           $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

           $prepend = '<strong>';
           $append = '</strong>';
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;

            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
}

And here the errors: enter image description here

Could any help me? Thanks :)

1 Answer 1

2

This is how I added data attribute to my menu It simply adds data-title="menu-title" to each link on my main nav, change it to adapt to your need.

You don't actually need to use Nav Walker to add this

add_filter( 'nav_menu_link_attributes', 'cfw_add_data_atts_to_nav', 10, 4 );
    function cfw_add_data_atts_to_nav( $atts, $item, $args ) {

    $atts['data-title'] = $item->post_title;
    return $atts;
}
3
  • Not sure if things were changed in the most recent version but I had to use $item->title instead of $item->post-title.
    – Jared
    Jul 23, 2015 at 19:34
  • @Jrod I believe post_title is still valid in 4.3 Is there any links or articles you can provide? If anything has changed I would like to know it as well. Aug 31, 2015 at 21:53
  • It seems like post_title is empty until you edit the Navigation Label of a menu item.
    – Jared
    Sep 1, 2015 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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