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(' ', $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
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.