6

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 )); ?>
Improve this question
2
  • hey, would you mind posting your answer (or just pm'ing me). I'm trying to do the same thing! Commented Nov 1, 2017 at 20:00
  • 1
    @abalter I added my final code to the question. Hope it helps! Commented Nov 1, 2017 at 20:04

1 Answer 1

Reset to default
9

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

Improve this answer
5
  • 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) Commented Dec 5, 2016 at 21:49
  • are you getting any messages in your error logs? Commented Dec 5, 2016 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. Commented Dec 5, 2016 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 Commented Dec 5, 2016 at 22:04
  • I was able to get it working using this answer. Thank you for pointing me in the right direction! Commented Dec 5, 2016 at 22:08

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.