Register and Create Custom Menu in WordPress, WordPress Menu Walker
Register New Menu in ‘Menu Setting’ Appearance -> Menu
Add in function.php
1 2 3 4 5 6 7 8 9 10 | /*Register Menu*/ function register_my_menus() { register_nav_menus( array( 'header-menu' => __( 'Header Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) ); } add_action( 'init', 'register_my_menus' ); |
For Adding extra CSS class in menu <li> (in function.php)
1 2 3 4 5 6 7 | function add_additional_class_on_li($classes, $item, $args) { if($args->add_li_class) { $classes[] = $args->add_li_class; } return $classes; } add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3); |
Main Walker menu (in function.php)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | class Nfr_Menu_Walker extends Walker_Nav_Menu{ /** * Traverse elements to create list from elements. * * Display one element if the element doesn't have any children otherwise, * display the element and its children. Will only traverse up to the max * depth and no ignore elements under that depth. It is possible to set the * max depth to include all depths, see walk() method. * * This method shouldn't be called directly, use the walk() method instead. * * @since 2.5.0 * * @param object $element Data object * @param array $children_elements List of elements to continue traversing. * @param int $max_depth Max depth to traverse. * @param int $depth Depth of current element. * @param array $args * @param string $output Passed by reference. Used to append additional content. * @return null Null on failure with no changes to parameters. */ function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) { if ( !$element ) return; $id_field = $this->db_fields['id']; //display this element if ( is_array( $args[0] ) ) $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] ); //Adds the 'parent' class to the current item if it has children if( ! empty( $children_elements[$element->$id_field] ) ) { array_push($element->classes,'parent'); $element->title .= ' <i class="ion-android-arrow-dropdown"></i>'; } $cb_args = array_merge( array(&$output, $element, $depth), $args); call_user_func_array(array(&$this, 'start_el'), $cb_args); $id = $element->$id_field; // descend only when the depth is right and there are childrens for this element if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) { foreach( $children_elements[ $id ] as $child ){ if ( !isset($newlevel) ) { $newlevel = true; //start the child delimiter $cb_args = array_merge( array(&$output, $depth), $args); call_user_func_array(array(&$this, 'start_lvl'), $cb_args); } $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output ); } unset( $children_elements[ $id ] ); } if ( isset($newlevel) && $newlevel ){ //end the child delimiter $cb_args = array_merge( array(&$output, $depth), $args); call_user_func_array(array(&$this, 'end_lvl'), $cb_args); } //end this element $cb_args = array_merge( array(&$output, $element, $depth), $args); call_user_func_array(array(&$this, 'end_el'), $cb_args); } } |
Use this code where you want to appear menu (header.php)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <nav class="overlay-menu-nav"> <?php //wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); $walker = new Nfr_Menu_Walker(); wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => false, 'menu_id' => 'nav', 'add_li_class' => 'slidedown', 'depth' => 3, 'walker' => $walker ) ); ?> </nav> |