Custom Footer Menu

1

Hi there,

I would like to display a custom menu in the footer with no dropdowns. So all the children’s menu items are displayed directly underneath the parent. So I created a custom walker and call the menu like this:

if (has_nav_menu('footer_navigation')) :
	wp_nav_menu(array('theme_location' => 'footer_navigation', 'menu_class' => 'footer nav row', 'walker' => new Footer_Nav_Walker() ));
endif;

For the custom walker I used the Roots_Nav_Walker as a base and stripped out all the dropdown markups like this:

class Footer_Nav_Walker extends Walker_Nav_Menu {
	function check_current($classes) {
		return preg_match('/(current[-_])|active/', $classes);
	}
	
	function start_lvl(&$output, $depth = 0, $args = array()) {
		$output .= "\n<ul>\n";
	}
  
	function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {	 	
		$item_html = '';
		parent::start_el($item_html, $item, $depth, $args);
		$item_html = apply_filters('roots_wp_nav_menu_item', $item_html);
		$output .= $item_html;
	}
	
	function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
		$element->is_dropdown = ((!empty($children_elements[$element->ID]) && (($depth + 1) < $max_depth || ($max_depth === 0))));
		parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
	}
}

Which works great and keeps the nice and clean Roots_Nav_Walker output.
But what I would like to achieve is to add the bootstrap class col-sm-2 only to the parent list items. So ideally:

<ul id="menu-footer-menu" class="footer nav row">
    <li class="menu-title-a col-sm-2">
        <a href="/menu-title-a/">Title A</a>
        <ul>
            <li class="menu-title-1">
            <li class="menu-title-2">
            <li class="menu-title-3">
            <li class="menu-title-4">
        </ul>
    </li>
    <li class="menu-title-b col-sm-2">
        <a href="/menu-title-b/">Title B</a>
        <ul>
            <li class="menu-title-5">
            <li class="menu-title-6">
            <li class="menu-title-7">
        </ul>
    </li>
    etc...
</ul>

But I’m not sure how that roots_wp_nav_menu_item filter works.
How can I modify my walker so the class gets added to the parent list items?

Thanks a lot!

2

https://github.com/roots/roots/blob/master/lib/nav.php#L41-50

Instead of adding a dropdown class, add your column markup. You will also need to change the depth check on line 42 to keep it to first level.

3

Yes, got it! This did the trick:

function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
	if ($depth == 0){
		$element->classes[] = 'col-sm-2';
	}	
	parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}

Thank you!