Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have written a custom walker to integrate a jquery dropdown nav script into my wp 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 dropdown 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

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 undersand 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 );       
  }}
share|improve this question
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.