Share:
       
   

In this article today we lean to create walker dropdown menu in WordPress. When we create dropdown menu in WordPress so people do not know how to setup it properly.

you just copy code and paste you functions.php file.



class My_Walker_Nav_Menu extends Walker_Nav_Menu {

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

  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
    {

      global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

    // Check our custom has_children property.here is the points
    if(in_array('menu-item-has-children', $classes ) && $depth == 0) {
       // Your Code
      $class_names = ' class="dropdown custom-drop ' . esc_attr( $class_names ) . '"';
    } else {
      $class_names = ' class="' . esc_attr( $class_names ) . '"';
    }

    

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $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        ) .'"' : '';

    $item_output = $args->before;

    // Check our custom has_children property.here is the points
    if(in_array('menu-item-has-children', $classes ) && $depth == 0) {
    $item_output .= '<i class="bibi-chevron-down hidden-xs"></i>';
    }
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

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

        
    }
}

after adding walker menu code on functions.php then we need to arrange dropdown menu from WordPress dashboard – go to in Appearance menu of you WordPress Dashboard and click on menu tab link and select your menu list then arrange items according to your need structure. see below

WordPress Dashboard Dropdown menu

Output is below see this

Dropdown menu in WordPress

About Raka Rocks

Hi, My self Raka Rocks. I am web designer and Front End Developer total 8 year exp. in this fields. I am a continuous blogger and has blogged on different topics. He loves to surf the Internet and always tries to get new ideas about new technologies and innovations and share this excellent information with all technology lovers.

Leave a Reply

Your email address will not be published.