wp_nav_menu custom walker – child items

I have written a custom walker to integrate a jQuery drop-down nav script into my WordPress template. I need to add .dropdown-link to each of my parent menu items and .dropdown-wrapper to the unordered list of my child items. That much is working fine.

My issue is, because of my drop-down script, I need to group my child menu items into groups of 3, each with their own unordered list … and this seems very difficult with the way Walker_Nav_Menu class renders the list items

Read More

What I’m seeing is that the opening unordered list for the child items is generated in start_lvl() and $output.= in start_el() defines the rendering of list items.

But where is the opening unordered list (class=menu) for parent items generated? Why don’t I see that anywhere? I think part of the answer might be in how the apply_filters('walker_nav_menu_start_el'...) works … and this is where my wp knowledge is lacking … I don’t understand the way filters are invoked in WP. And I don’t understand what walker_nav_menu_start_el refers to in this scenario …

I want to know how can I differentiate between a parent unordered list and the children’s unordered list. My ideal output is:

<ul id="main-nav" class="menu">
    <li><a href="#" class="dropdown-link">ABOUT</a>
        <ul class="dropdown-wrapper">                       
            <li>
                <ul class="nav-column">
                    <li><a href="#">sunnav1</a></li> <!-- these are the child menu items -->
                    <li><a href="#">sunnav2</a></li> <!-- they need to be in groups of 3 -->
                    <li><a href="#">sunnav3</a></li> 
                </ul> etc ...

The custom walker is here:

class dropdown_menu_walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
            $indent = str_repeat("t", $depth);
            $output .= "n$indent<ul class="sub-menu dropdown-wrapper">n"; 
    }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
            $indent = str_repeat("t", $depth);
            $output .= "$indent</ul>n";
    }

  function start_el(&$output, $item, $depth, $args)
  {
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
       $class_names = $value = '';
       $classes = empty( $item->classes ) ? array() : (array) $item->classes;
       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"'; 
        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .' count="' . $counter.'">';
        $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        ) .'"' : '';
        $attributes .= ! empty( $item->classes )    ? ' class="dropdown-link"' : '';

        $item_output .= '<a'. $attributes .'>';
        $item_output .= apply_filters( 'the_title', $item->title, $item->ID );
        $item_output .= '</a>';
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );       
  }}

Related posts

Leave a Reply