Add data-filter attribute to wp_nav_menu

Question

I am working with a custom theme and I want to add a data-filter attribute to my menu links. I did not build the theme so I am struggling to work out how and where to add this.

In my functions.php there is this code that I believe loads my menu:

//Default WP menu
    function litho_default_wp_menu_off(){}
        function litho_default_wp_menu()
    {
        $args = array(
            'sort_column' => 'menu_order, post_title',
            'menu_class'  => 'menu',
            'include'     => '',
            'exclude'     => '',
            'echo'        => false,
            'show_home'   => false,
            'link_before' => '',
            'link_after'  => '' );

        $menu = wp_page_menu( $args );
        $menu = preg_replace('/^(<div class\="menu"><ul>)/i','',$menu);
        $menu = preg_replace('/(<\/ul><\/div>)$/i','',$menu);

        echo '<ul class="simple-nav">'.$menu.'</ul>';
    }

class litho_responsive_menu extends Walker_Nav_Menu
{
    function start_el(&$output, $items, $depth, $args)
    {
        global $wp_query;

        $visual_indent = ( $depth ) ? str_repeat('&nbsp;&nbsp;&nbsp;', $depth) : '';

        $output .= '<form name="menu_selector" method="post" action="#">';
        $output .= '<select name="url_list" onchange="gotosite()">';
        $output .= '<option value="" selected="selected" disabled="disabled">Please select...</option>';

        foreach($items as $item)
        if($depth != 0)
            $output .= '<option value="' . esc_attr( $item->url ) .'">'. $visual_indent . apply_filters( 'the_title', $item->title, $item->ID ) . '</option>';
        else
            $output .= '<option value="' . esc_attr( $item->url ) .'">'.$prepend.apply_filters( 'the_title', $item->title, $item->ID ).'</option>';

        $output .= '</select>';
        $output .= '</form>';
        // $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    function end_el(&$output, $item, $depth) {
        return;     
    }
}

And this outputs a menu that looks like this:

<div class="row" id="main_menu">
    <div class="columns six">
        <nav role="navigation">
            <ul class="simple-nav">
                <li class="page_item page-item-15 current_page_item"><a href="http://192.168.0.16:8888/">HOME</a></li>
                <li class="page_item page-item-38"><a href="http://192.168.0.16:8888/directing/">DIRECTING</a></li>
                <li class="page_item page-item-40"><a href="http://192.168.0.16:8888/compositing/">COMPOSITING</a></li>
            </ul>
        </nav>
    </div>
</div>

However, I am using Isotope for my theme and want to make use of filtering. So want to add a data-filter attribute that has the value of the link name.
So for example a link for DIRECTING would have data-filter=".directing"

<ul id="filters">
    <li><a href="#" class="all" data-filter="*">show all</a></li>
    <li><a href="#" class="directing" data-filter=".directing">directing</a></li>
    <li><a href="#" class="compositing" data-filter=".compositing">compositing</a></li>
</ul>

But I cannot work out where the code is for the <li> items. I see where the <ul> is created in my functions.php file. But between the <ul> tags it only says .$menu.

When I look at $menu there is no mention of any list items or a way to add my data-filter attribute to it.

How do I go about adding a data-filter attribute to my menus list items.

Thanks

it looks like the default walker provided by wp, look for register nav menu and there will be a field called walker, if its missing or blank, it uses the default walker. If you want to use a custom one, create one like above (google wordpress walker class) and enter the name in the walker field. — David
Thanks @David I found this when looking for register nav menu, does this provide any further clues? '// Add menu supports. add_theme_support('menus'); register_nav_menus(array( 'primary_navigation' => __('Left Navigation', 'litho'), 'right_primary_navigation' => __('Right Navigation', 'litho') ));' — rxssmcdxwell
I realize this is old but 5 years later, I'm trying to do the same thing. How did you solve it? — Aman

rxssmcdxwell rxssmcdxwell · Accepted Answer · 2015-08-05T01:30:00

I managed to achieve this by adding a walker to the $args array:

$args = array(
    'sort_column' => 'menu_order, post_title',
    'menu_class'  => 'menu',
    'include'     => '',
    'exclude'     => '',
    'echo'        => false,
    'show_home'   => false,
    'link_before' => '',
    'link_after'  => '',
    'walker' => new Custom_Walker_Nav_Menu );

And then adding this custom walker.

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $page, $depth = 0, $args = array(), $id = 0) {
        if ( $depth )
            $indent = str_repeat("\t", $depth);
        else
            $indent = '';

        extract($args, EXTR_SKIP);
        $linkName = apply_filters( 'the_title', $page->post_title, $page->ID );
        $output .= $indent . '<li id="item_'.$page->ID.'"><a href="#" class="'.strtolower($linkName).'" data-filter=".'.strtolower($linkName).'">'.$linkName.'</a>';
    }


    function end_el(&$output, $page, $depth = 0, $args = array()) {
        $output .= "</li>\n";
    }
}

Does this seem correct?

Add data-filter attribute to wp_nav_menu

1 Answers