$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>menus - Is this format possible with a custom Nav Walker class?|Programmer puzzle solving
最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

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

matteradmin8PV0评论

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?

Share Improve this question asked Feb 21, 2019 at 10:35 Mr DCMr DC 133 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

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
    }

}
Post a comment

comment list (0)

  1. No comments so far