Hi there,
I am working on a theme that requires a navigation walker that breaks the menu items after a count of 2 and then a count of 4.
I have successfully created the custom walker that splits after 2 but I am having a problem getting a second to work in the same functions file.
Here is my current code. What I require as a solution is how I can create the two walker files that work together in the one theme.
/**
* Blog Walker Function
*/
class blog_nav_walker extends Walker_Nav_Menu {
var $current_menu = null;
var $break_point = null;
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
if( !isset( $this->current_menu ) )
$this->current_menu = wp_get_nav_menu_object( $args->menu );
if( !isset( $this->break_point ) )
$this->break_point = ceil( $this->current_menu->count / 2 ) + 1;
$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="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
if( $this->break_point == $item->menu_order )
$output .= $indent . '</li></ul><ul><li>';
else
$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 ) .'"' : '';
$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 .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
<?php wp_nav_menu( array( 'theme_location' => 'blog' , 'menu' => 'Blog Header' , 'walker' => new blog_nav_walker , 'container_class' => 'blog-header-menu') ); ?>
Arnav Joy answers:
try this
<?php
/**
* Blog Walker Function
*/
class blog_nav_walker extends Walker_Nav_Menu {
var $current_menu = null;
var $break_point = null;
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
if( !isset( $this->current_menu ) )
$this->current_menu = wp_get_nav_menu_object( $args->menu );
if( !isset( $this->break_point ) )
$this->break_point = ceil( $this->current_menu->count / 2 ) + 1;
$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="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
if( 2 == $item->menu_order || 4 == $item->menu_order )
$output .= $indent . '</li></ul><ul><li>';
else
$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 ) .'"' : '';
$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 .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Andy_gunkdesign comments:
Sorry if my question wasn't clear. My original function worked ok, I need:
1. A new function to split my other menu list by 4, called something like footer_nav_walker
2. To know how to have two menu functions in the one functions.php file. I tried duplicating the original, changing the extended class name but it didn't work. I think the function names/variables names conflicted.
Thanks
Arnav Joy comments:
if you change name of walker function then you also have to call that here for footer
<?php wp_nav_menu( array( 'theme_location' => 'blog' , 'menu' => 'Blog Header' , 'walker' => new blog_nav_walker_footer , 'container_class' => 'blog-header-menu') ); ?>
Andy_gunkdesign comments:
Sorry, this doesn't solve the issue, I tried this before I posted on the site.
I need two separate walkers that split differently. I can't see what your solution does differently to what I posted, the count is still split by 2?
Arnav Joy comments:
try this
/**
* Blog Walker Function
*/
class blog_nav_walker_footer extends Walker_Nav_Menu {
var $current_menu = null;
var $break_point = null;
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
if( !isset( $this->current_menu ) )
$this->current_menu = wp_get_nav_menu_object( $args->menu );
if( !isset( $this->break_point ) )
$this->break_point = ceil( $this->current_menu->count / 4 ) + 1;
$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="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
if( $this->break_point == $item->menu_order )
$output .= $indent . '</li></ul><ul><li>';
else
$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 ) .'"' : '';
$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 .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
and call it as
<?php wp_nav_menu( array( 'theme_location' => 'blog' , 'menu' => 'Blog Header' , 'walker' => new blog_nav_walker_footer , 'container_class' => 'blog-header-menu') ); ?>
Andy_gunkdesign comments:
Almost there, the first list writes out a list of 2 and then 6. Not two lists of 4.
<div class="blog-header-menu">
<ul id="menu-footer-links-menu" class="menu">
<li><a href="#">Personal Injury</a></li>
<li><a href="#">Car Accidents</a></li>
</ul>
<ul>
<li><a href="#">Slips & Trips</a></li>
<li><a href="#">Bike Accidents</a></li>
<li><a href="#">Accidents at Work</a></li>
<li><a href="#">Motorcycle Accidents</a></li>
<li><a href="#">Test</a></li>
<li><a href="/">Test 2</a></li>
</ul>
</div>
Arnav Joy comments:
this is the line which does the trick , so change no . from 4 to something else and test it
if( !isset( $this->break_point ) )
$this->break_point = ceil( $this->current_menu->count / 4 ) + 1;
Andy_gunkdesign comments:
Hi Arnav,
First off thanks for your persistence with this issue. I thought it would be clearer to show you the output of the code and the target outcome.
Linked file is the output of the above with a count split of 4