How to Split WordPress Menu into Two Walker Class

Introduction

Split WordPress Menu into Two Walker Class with help of extending the Walker class by writing an custom walker. It’s Easy to divide the menu into two parts. WordPress Walker class helps you to get the total count of the menu items. With help of that count, we can divide that menu and make it by two.  Here is the extended walker class for the Split of menu.

Custom Walker Class

class Kvcodes_Split_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 );
 // echo json_encode($args)."-";
 }
 
 if( !isset( $this->break_point ) )
 $this->break_point = ceil( $this->current_menu->count / 2 ) + 1; 

 $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

 $class_names = $value = '';
 // $this->break_point = 3; 
 $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> </div>
 <div class="SecondMenu"><ul><li' . $id . $value . $class_names .'>';
 else
 $output .= $indent . '<li' . $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 .= $args->after;

 $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
 }
}

The wp_get_nav_menu_object functions helps to get the count of the menu items. Once the count is retrieved, we can divide it by two and round it to next number, if it has any decimal point with help of the below code.

 $this->break_point = ceil( $this->current_menu->count / 2 ) + 1;

Now lets iterate and when it reaches our limit, we will close the menu and open the second menu like this.

if( $this->break_point == $item->menu_order )
 $output .= $indent . '</li></ul> </div>
 <div class="SecondMenu"><ul><li' . $id . $value . $class_names .'>';
 else
 $output .= $indent . '<li' . $id . $value . $class_names .'>';

Actually we start with FirstMenu . And the second menu will be called when it reaches the limit. That’s it. Here after you have to call the walker class one the wp_nav_menu.

Menu Code

And here is the menu calling code.

wp_nav_menu( array(
 'theme_location' => 'widget_pages',
 'container_class' => 'FirstMenu',
 'walker' => new Kvcodes_Split_nav_walker
 ) );

That’s it. You can create two divided menu from one menu.