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
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 ) ); ?>
i want to use some of this Creative Link Effects inside my Webside - http://tympanus.net/codrops/2013/08/06/creative-link-effects/
The modernizer.js i allready placed inside the header.php
How do i add the "data-hover" inside the Menu items.
Actually the menu looks in this way:
<ul class="menu" id="menu-informationen-aus">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-39" id="menu-item-39">Nachrichten</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40" id="menu-item-40">Veranstaltungen</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41" id="menu-item-41">Vereine</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42" id="menu-item-42">Bildungseinrichtungen</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43" id="menu-item-43">Stadtbibliothek</li>
You can use a Custom Walker to add attributes to the menu items (http://codex.wordpress.org/Function_Reference/wp_nav_menu#Using_a_Custom_Walker_Function)
Then your PHP would look something like:
wp_nav_menu( array(
'container' =>false,
'menu_class' => 'nav',
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new your_walker())
);
You Then need to create a class that extends Walker_Nav_Menu. It'll look something like this:
class description_walker extends Walker_Nav_Menu
{
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$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 . $value . $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['data-hover'] = 'Desultory';
$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 .'>';
/** 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 .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
You can find this example within wordpress, under: wp-includes/nav-menu-template.php
The important line here is:
$atts['data-hover'] = 'Desultory';
I have combined bootstrap and wordpress. I have found 2 articles and gists that provide a walker and some markup to add to get a dropdown navigational menu working properly.
I have tried several times to incorporate the walker, but all I get is just a blank vertical menu that can't be seen except for bullets. Does anyone know what I am doing wrong?
Ok, here is what I have done. http://twittem.github.com/wp-bootstrap-navwalker/ I have followed the instructions here. I created a new twitter_bootstrap_nav_walker.php file, just like it said. I have placed it in the correct place. The wp_nav_menu() (code), I wasn't sure where to put this, one person said to put it into mt header, another said to put it in nav_menu_template.php. When I put it to the template, I get a syntax error within dreamweaver. When I added the code to the header.php file, I get a fatal error. Scott, thanks for showing me something new but I am not looking to start over
The markup/code below is working for me. You may or may not want the user login code in the header.
in header.php
<div id="page-navbar" class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
<?php if ( is_user_logged_in() ) : ?>
<i class="icon-user"></i> <?php echo $current_user->display_name; ?>
<?php else : ?>
<i class="icon-signin"></i> Sign In
<?php endif ?>
</p>
<?php wp_nav_menu(array(
'depth' => 2,
'container' => false,
'menu_class' => 'nav',
'walker' => new Bootstrap_Walker_Nav_Menu()
)); ?>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
The Bootstrap_Walker_Nav_Menu class comes from John Megahan.
class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth = 0, $args = array()) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$li_attributes = '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ($args->has_children) ? 'dropdown' : '';
$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
$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 ) .'"' : '';
$attributes .= ($args->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
$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 .= ($args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
if ( !$element )
return;
$id_field = $this->db_fields['id'];
//display this element
if ( is_array( $args[0] ) )
$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
else if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'start_el'), $cb_args);
$id = $element->$id_field;
// descend only when the depth is right and there are childrens for this element
if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
foreach( $children_elements[ $id ] as $child ){
if ( !isset($newlevel) ) {
$newlevel = true;
//start the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
}
$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
}
unset( $children_elements[ $id ] );
}
if ( isset($newlevel) && $newlevel ){
//end the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
}
//end this element
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'end_el'), $cb_args);
}
}
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.