menus - Is this format possible with a custom Nav Walker class?

I'm looking to have the following output on a wordpress menu

<nav>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <aside>
   <a href="#" class="custom-class">Sub Menu Trigger</a>
   <div>
    <a href="#">Sub Menu Link</a>
    <a href="#">Sub Menu Link</a>
  </div>    
 </aside>
</nav>

However I'm not sure how to do this with the Nav Walker (I'm still getting my head around it). Is it even possible to have:

• stripped of ul / li
• aside wrapping the sub-menu parent
• div wrapping the sub-menu items
• custom-class added to anchor via CMS

I'm not sure if this is possible. If it isn't, is there an alternative that could help me here? Or is it possible, but complex?

I'm looking to have the following output on a wordpress menu

<nav>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <aside>
   <a href="#" class="custom-class">Sub Menu Trigger</a>
   <div>
    <a href="#">Sub Menu Link</a>
    <a href="#">Sub Menu Link</a>
  </div>    
 </aside>
</nav>

However I'm not sure how to do this with the Nav Walker (I'm still getting my head around it). Is it even possible to have:

• stripped of ul / li
• aside wrapping the sub-menu parent
• div wrapping the sub-menu items
• custom-class added to anchor via CMS

I'm not sure if this is possible. If it isn't, is there an alternative that could help me here? Or is it possible, but complex?

• menus
• navigation
• walker

Share Improve this question asked Feb 21, 2019 at 10:35 Mr DCMr DC 1333 bronze badges 1

• Yes it's possible. Are you asking for someone to do it for you? Or was that all you needed to know? – Jacob Peattie Commented Feb 21, 2019 at 10:39

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Yes, it is possible... All you need is to write your own Walker class. Here's a starting point:

class My_Custom_Walker_Nav_Menu extends Walker_Nav_Menu {

    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        if ( $depth ) {
            $output .= '<aside><a href="#" class="custom-class">Sub Menu Trigger</a><div>';
        }
    }

    public function end_lvl( &$output, $depth = 0, $args = array() ) {
        if ( $depth ) {
            $output .= '</div></aside>';
        }
    }

    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
        // don't do anything - elements have no endings
    }

}