5

I would like to set up a custom menu walker to remove the unordered list and wrap each individual link in a custom div element. The desired output would look like this:

<div class="col-md-3"><a href="linkurl">Link Title</a></div>

This is what I have tried so far:

<? wp_nav_menu( array( 'menu' => 'Main', 'container' => '', 'items_wrap' => '%3$s', 'link_before' => '<div class="col-md-3">', 'link_after' => '</div>' ) ); ?>

However the above code is producing this output:

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
    <a href="linkurl"><div class="col-md-3">Link Title</div></a>
</li>

Here is my updated attempt based on the resource shared by @shahar:

<?php wp_nav_menu( array('menu' => 'Main', 'walker' => new Footer_Walker()) ); ?>

And in my functions.php:

class Footer_Walker extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth=0, $args=array()) {
    $output .= "<div>".esc_attr($item->label);
  }

  function end_el(&$output, $item, $depth=0, $args=array()) {
    $output .= "</div>\n";
  }
}

Using the code above the menu is not displaying at all.


Update: Here is the final code I ended up using in my functions file:

class Footer_Walker extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    $classes = empty($item->classes) ? array () : (array) $item->classes;
    $class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
    !empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"';
    $output .= "<div class='col-sm-6 col-md-3'>";
    $attributes  = '';
    !empty( $item->attr_title ) and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
    !empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
    !empty( $item->xfn ) and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
    !empty( $item->url ) and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
    $title = apply_filters( 'the_title', $item->title, $item->ID );
    $item_output = $args->before
    . "<a $attributes>"
    . $args->link_before
    . $title
    . '</a></div>'
    . $args->link_after
    . $args->after;
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }
}

And here's the code to generate the menu in your template:

<?php wp_nav_menu(array('menu' => 'Footer', 'items_wrap'=> '%3$s', 'walker' => new Footer_Walker(), 'container'=>false, 'menu_class' => '', 'theme_location'=>'footer', 'fallback_cb'=>false )); ?>
  • hey, would you mind posting your answer (or just pm'ing me). I'm trying to do the same thing! – abalter Nov 1 '17 at 20:00
  • 1
    @abalter I added my final code to the question. Hope it helps! – APAD1 Nov 1 '17 at 20:04
6

You need to set-up your own menu walker (link to Wordpress Codex), and in there add custom start_el and end_el overrides. So for example your start_el and end_el may look something like this:

function start_el(&$output, $item, $depth=0, $args=array()) {
    $output .= "<div>" . esc_attr($item->label);
}

function end_el(&$output, $item, $depth=0, $args=array()) {
    $output .= "</div>\n";
}

This tutorial might be useful too: https://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401

  • Thank you, I attempted using the code you shared within my walker class but now the menu is not showing at all. Any ideas there? (updated my question with the code from my most recent attempt) – APAD1 Dec 5 '16 at 21:49
  • are you getting any messages in your error logs? – shahar Dec 5 '16 at 21:55
  • Nope, but if I change <div> and </div> to <li> and </li> in the walker then I get 4 blank list items where the menu should be(there are 4 links in this menu). So it seems as though the walker may be working correctly, but for some reason the menu links and link titles aren't coming through. – APAD1 Dec 5 '16 at 21:58
  • Take a look at the source code of the Nav Manu walker - start_el (line 87) has various options which you may want to use. developer.wordpress.org/reference/classes/walker_nav_menu – shahar Dec 5 '16 at 22:04
  • I was able to get it working using this answer. Thank you for pointing me in the right direction! – APAD1 Dec 5 '16 at 22:08

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.