Wordpress NAV Walker not showing - wordpress

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.

Related

Add Description to WordPress menu links

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 ) ); ?>

Wordpress custom walker menu doesnt' display items

I'm working with the custom menu Walker class but have troubles on displaying menu items.
The only menu item which's displayed is the "home" item.
I created two pages but I just get void link tags.
Plus the "home" menu item doesn't get the "hvr-bounce-to-top" class and I would like all the items to get that class.
This is the result I get checking firebug:
<div class="nav-menu">
<ul>
<li class="current_page_item">
Home
</li>
<li id="menu-item-4" class=" hvr-bounce-to-top ">
<a></a>
</li>
<li id="menu-item-2" class=" hvr-bounce-to-top ">
<a></a>
</li>
</ul>
</div>
This is the wp_nav_menu code in header.php:
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'nav-menu',
'container' => false,
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new DescriptionWalker()
) );//wp_nav_menu
?>
And this is my Walker class in the function.php theme directory:
class DescriptionWalker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
echo 'title = ' . $item->title;
$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 ) . ' hvr-bounce-to-top "';
$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 );
$item_output .= $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}//DescriptionWalker
Thank you

Show active menu item

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="&nbsp">';
$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="&nbsp'.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.

Wordpress Custom Walker li id to li class

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 .'>';

wp_nav_menu add <span></span> tags inside <a></a> tags that is parent

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.

Resources