Ask your WordPress questions! Pay money and get answers fast! (more info)

Two Nav walkers in one functions file WordPress

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

Answers (1)

2013-11-24

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 &amp; 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