0

i would like to create a footer vertical menu but it should be split into two columns using walker nav menu, but i want to add <div class="col medium-3 small-12 large-3"> and h5 tag before each columns start?

I have walker nav menu function but i don't know where to add div and h5 tag in the walker function?

Footer Code

<?php 
  $defaults = array(
      'theme_location'  => 'footer-menu',
      'container'       => '',
      'menu_class'      => '',
      'walker'          => new footer_nav_walker()
   );

  wp_nav_menu( $defaults );
?>

Function Code

class footer_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' . $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 );
}


function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul>\n";
}
}

Html Example

 <div class="col medium-3 small-12 large-3">
       <h5>Our Company</h5>
          <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
         </ul>
  </div>
  <div class="col medium-3 small-12 large-3">
      <h5>About us</h5>
         <ul>
         <li><a href="#">Company Information</a></li>
         <li><a href="#">Reviews</a></li>
         </ul>
  </div>

Wordpress Result

enter image description here

Required Result

enter image description here

  • The desired result looks like two different menus, maybe it is what you need. – cybmeta Nov 20 '17 at 8:21
  • @cybmeta yes required result i want same thing in wp footer menu? – user131591 Nov 20 '17 at 8:25
  • The 'normal' way these types of footer menus are done is by having multiple menu widgets, with a widget area for each footer column. – Jacob Peattie Nov 20 '17 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy