I'm currently using a WordPress custom Walker to customize my navigation.
It currently generates this navigation:
<nav class="nav-top clearfix">
<ul class="clearfix">
<li id="menu-item-69" class="current_page_item">test1</li>
<li id="menu-item-68">test2</li>
<li id="menu-item-67">test3</li>
<li id="menu-item-66">test4</li>
<li id="menu-item-65">test5</li>
<li id="menu-item-64">test6</li>
</ul>
</nav>
When i click on test2, it will apply the current_page_item class to it.
Everything is working fine, however I also want to use the same navigation in the footer.
If I do that, then i get validation errors because of the li id.
How do i change the li id to li class ?
Here's my custom Walker:
class My_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;
$current_indicators = array('current_page_item');
$newClasses = array();
foreach($classes as $el){
//check if it's indicating the current page, otherwise we don't need the class
if (in_array($el, $current_indicators)){
array_push($newClasses, $el);
}
}
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $newClasses), $item ) );
if($class_names!='') $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 ) .'"' : '';
if($depth != 0)
{
//children stuff, maybe you'd like to store the submenu's somewhere?
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
In case you haven't figured that out yet, here's what you should do:
Replace $newClasses = array(); with:
$newClasses = array( 'menu-item-'. $item->ID );
Then replace the following line:
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
With:
$output .= $indent . '<li' . $value . $class_names .'>';
Related
This is the code I added to my functions.php file. It allows me to add a Description to my menu links. But how do I get the span outside the a-tag, not enclosed in it?
// DESCRIPTIONS IN NAV MENU
function nav_menu_description( $item_output, $item, $depth, $args ) {
if ( !empty( $item->description ) ) {
$item_output = str_replace( $args->link_after . '</a>', '<span class="menu-item-description">' . $item->description . '</span>' . $args->link_after . '</a>', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'nav_menu_description', 10, 4 );
?>
Walker class extends the existing class in WordPress. It basically just adds a line of code to display menu item descriptions. Add this code in your theme’s functions.php file.
class Menu_With_Description 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 ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
WordPress themes use wp_nav_menu() function to display menus. Most WordPress themes add menus in header.php template. However, it is possible that your theme may have used some other template file to display menus.
What we need to do now is find wp_nav_menu() function in your theme (most likely in header.php) and change it like this.
<?php $walker = new Menu_With_Description; ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
My nav-menu template is:
<ul class=" nav navbar-nav">
<li>
<a href="#">
<span data-hover="my-text">item1</span>
</a>
</li>
</ul>
How to use this mark-up in wp-nav-menu in WordPress?
Thanks.
This code isn't a custom class neither is a template. You should declare the style you want inside a <style> tag or in a css file and then link that file to your html.
On css you use selectors to define what elements will have they style changed. Class selectors start with a dot ., for example .navbar-nav.
Extended example:
.navbar-nav{
background-color:black;
text-align: center;
font-size: 16px;
}
Your html code should go directly in the page you want it to be. Unless you're using some template engine that can import an html template, reusing common code that way.
What you're looking for is the Walker_Nav_Menu Class. Edit the HTML as needed.
Also make sure you edit the template which calls the wp_nav_menu function and add the walker parameter to it.
Add this to your functions.php file.
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span data-hover="my-text">';
/** This filter is documented in wp-includes/post-template.php */
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
And add 'walker' => new Custom_Walker_Nav_Menu to the wp_nav_menu function that calls your menu.
I edit code's answer of Hareesh Sivasubramanian and get the answer:
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'><span data-hover="';
$item_output .= apply_filters('the_title', $item->title, $item->ID );
$item_output .= '">';
/** This filter is documented in wp-includes/post-template.php */
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
i've a problem and don't know how solve it.
I need to display the dropdown menu of the current active menu.
I have the following code:
Class Description_Walker extends Walker_Nav_Menu {
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
$id_field = $this->db_fields['id'];
if ( is_object( $args[0] ) ) {
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
}
return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_lvl( &$output , $depth = 0 , $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul class=\"v-dropdown \">\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $current_object_id = 0)
{
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 = ' '. esc_attr( $class_names ) . '';
$output .= $indent . '<li >';
$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='';
$append = '';
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
$item_output = $args->before;
if ( $args->has_children ) {
$append=" ▾";
$item_output .= '<a class="dropdown" data-hover=" ">';
$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;
} else {
$item_output .= '<a class="'.esc_attr( $class_names ).'" '. $attributes .' data-hover=" '.preg_replace(' ', $item->title).$append.'" >';
$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 );
}
}
The website is this: http://fidesconsulta.ch/new_site
I need to show the ul class="v-dropdown" when the sub-menu is active.
Please help me.
Thank you.
Here's what I would do.
You could swap your <header class="relative"> for this:
<header class="relative <?php if ( $post->post_parent == '47' ) { ?>show-menu<?php } ?>" >
Replace the parent page ID where the '47' is. That is for if you have these pages set up with a parent id.
If not, you could do it this way, using the same <header class="relative"> setup.
<header class="relative <?php if ( is_page('services') || is_page('corporate-advisory') || is_page('audit-and-accounting') || is_page ('international-orientation-for-smi')) { ?>show-menu<?php } ?>" >
Then just add a css class like this in your css:
.show-menu ul li:nth-of-type(3) .v-dropdown {display: block; }
I set up a test locally, and I think either method will probably work for you. Let me know if I need to clarify.
Edit: I've added a psuedo-class in the css to target the first instance of '.v-dropdown' so that only the first menu opens.
Edit 2: I have updated the answer to reflect the correct css which helped AnmA solve the problem.
I found examples adding a class to top level items, so we can display an arrow in menu items with sub-items, but is seems terrible to cope with the already built in WordPress classes, can't display the arrow with current and CSS hover, it just ruins all states.
The current nav menu is like this <li><a>Text</a></li>
Is there someway to add a <span class="arrow"></span> within the parent <a></a> tags instead?!
Add -> "<span class="arrow"></span>" -> inside <a/></a> tags
Thus -> <li><a>Text<span class="arrow"></span></li></a> that is parent.
the current code Adds the <span></span> tags outside the <a></a> tags
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth, $args) {
$indent = str_repeat("\t", $depth);
if('primary' == $args->theme_location && $depth ==0){
$output .='<span class="arrow"></span>';
}
$output .= "\n$indent<ul class=\"sub-menu\">\n";
}
}
You are overwriting the incorrect method. You need the start_el instead. Here is the code for it:
class add_span_walker extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $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'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
if ( 'primary' == $args->theme_location ) {
$submenus = 0 == $depth || 1 == $depth ? get_posts( array( 'post_type' => 'nav_menu_item', 'numberposts' => 1, 'meta_query' => array( array( 'key' => '_menu_item_menu_item_parent', 'value' => $item->ID, 'fields' => 'ids' ) ) ) ) : false;
$item_output .= ! empty( $submenus ) ? ( 0 == $depth ? '<span class="arrow"></span>' : '<span class="sub-arrow"></span>' ) : '';
}
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
This code will add a <span class="sub-arrow"></span> to top-level menu items from the menu selected for the primary theme location in case that this menu item has any child items.
I have a custom wordpress theme and I implemented a custom walker for the nav
In my functions.php, I have this code
class My_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 ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
and in my header.php
<div id="access">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'walker'=> new My_Walker
));
?>
</div>
but when I view my page source, there is no data in the elements
<div id="access">
<div class="menu"><ul><li id="menu-item-5" class=""><a><br /><span class="sub"></span></a></li><li id="menu-item-8" class=""><a><br /><span class="sub"></span></a></li><li id="menu-item-10" class=""><a><br /><span class="sub"></span></a></li><li id="menu-item-13" class=""><a><br /><span class="sub"></span></a></li><li id="menu-item-15" class=""><a><br /><span class="sub"></span></a></li><li id="menu-item-17" class=""><a><br /><span class="sub"></span></a></li></ul></div>
</div>
this is suppose to be a simple walker, but I don't get it to work
Change:
'walker'=> new My_Walker
To:
'walker'=> new My_Walker()
Had the same Problem, hopefully you've already been in your wp-admin to setup the menu correctly? Going to wp-Admin->Design->Menus and clicking on the save button solved the problem for me.
Because i was trying it in dev-area i've only had the example-sites i've wanted to have a link to in the nav_menu. the interesting fact is, that the walker-function fires, and gets the ID's of all the pages in the blog. but $item->title is NULL.