2

I'm working on a custom project for a client and having an issue adding in data-scroll before the links in WordPress. I want the output to be <a data-scroll href='#'>.

Data-scroll is what I am looking to add in just after the a, here href ="#"

Hope someone can help me out.

Improve this question
1
  • 1
    And what have you tried? Javascripts can easily do that?
    – Mayeenul Islam
    Nov 12, 2016 at 5:56

3 Answers 3

Reset to default
0

A Custom Walker would be the best way to add anything anywhere to your wp_nav_menu

You hav to keep the following in your function.php

            <?php
        class MV_Cleaner_Walker_Nav_Menu extends Walker {
            var $tree_type = array( 'post_type', 'taxonomy', 'custom' );
            var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );
            function start_lvl(&$output, $depth) {
                $indent = str_repeat("\t", $depth);
                $output .= "\n$indent<ul class=\"sub-menu\">\n";
            }
            function end_lvl(&$output, $depth) {
                $indent = str_repeat("\t", $depth);
                $output .= "$indent</ul>\n";
            }
            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;
                $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array();
                $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
                $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : '';
                $id = apply_filters( 'nav_menu_item_id', '', $item, $args );
                $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
                $output .= $indent . '<li' . $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        ) .'"' : '';
                $item_output = $args->before;
                $item_output .= '<a data-scroll'. $attributes .'>';
                $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
                $item_output .= '</a>';
                $item_output .= $args->after;
                $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
            function end_el(&$output, $item, $depth) {
                $output .= "</li>\n";
            }
        }
        ?>

and then you can call the menu by 

<?php wp_nav_menu( array( 'menu'=>'Footer Menu 1',
menu_class => 'menu vertical footer-menu',
'walker' => new MV_Cleaner_Walker_Nav_Menu() ) ); ?>
Improve this answer
2
  • 1
    There's no point in going to the extent of adding a custom Walker when the Walker_Nav_Menu class already exposes the appropriate filter (nav_menu_link_attributes) for you to add custom attributes. A custom walker for this purpose just adds an additional layer of complexity.
    – Adam
    Nov 12, 2016 at 8:30
  • Thanks so much! This worked as well as the other solutions provided however I enjoyed the detail of this and find it useful!
    – Natalie
    Nov 12, 2016 at 23:36
4

You'll want to use the following filter:

nav_menu_link_attributes

Example:

function filter_nav_menu_link_attributes($atts, $item, $args) {

    if ( isset($args->theme_location) && $args->theme_location === 'my-menu-location' ) {
        $atts['data-scroll'] = 'some-value';
    }

    return $atts;

}

add_filter('nav_menu_link_attributes', 'filter_nav_menu_link_attributes', 10, 3);

Use $item and $args to isolate and act on the specific menu or specific menu item in which you wish to add your attribute to.

Read more here: nav_menu_link_attributes

Improve this answer
2
  • 1
    This should be the accepted answer. Thanks for sharing this. Never new about this hook until now.
    – klewis
    Nov 13, 2016 at 1:12
  • @blackhawk no problem! This is certainly better than deploying a custom walker, which is better served in use cases requiring complex modification of elements and structure. Enjoy.
    – Adam
    Nov 13, 2016 at 6:19
0

You need to add this code on functions.php file of current theme.

add_action( 'wp_footer', 'add_attr_nav_menu_link' );
function add_attr_nav_menu_link(){
    ?>
    <script type="text/javascript">

    jQuery( document ).ready(function() {

    jQuery('.nav-menu ul.menu li a').each(function() {
        jQuery(".nav-menu ul.menu li a").attr('data-scroll', '');

    });

    });
    </script>

    <?php

}

Let me know if you have any query!!!!

Improve this answer

Your Answer

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

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