1

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?

  • Yes it's possible. Are you asking for someone to do it for you? Or was that all you needed to know? – Jacob Peattie Feb 21 at 10:39
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
    }

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.