WordPress Dynamic Menu in Bootstrap

Today we learn to how we create bootstrap dynamic menu in WordPress theme development.

1. // header.php
3. <nav id="nav" class="main-nav float-right d-none d-lg-block">
4. <?php
5. wp_nav_menu( array(
6. 'theme_location' => 'primary',
7. 'container' => false,
8. 'menu_class' => 'nav navbar-nav',
9. 'walker' => new Cnc_Walker_Nav_Primary()
10. ) );
12. ?>
13. </nav><!-- .main-nav -->

1. //functions.php
2. <?php
4. class Cnc_Walker_Nav_Primary extends Walker_Nav_menu {
6. function start_lvl( &$output, $depth = 0, $args = array() ){ //ul
7. $indent = str_repeat("\t",$depth);
8. $submenu = ($depth > 0) ? ' sub-menu' : '';
9. $output .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n";
10. }
12. function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ){ //li a span
14. $indent = ( $depth ) ? str_repeat("\t",$depth) : '';
16. $li_attributes = '';
17. $class_names = $value = '';
19. $classes = empty( $item->classes ) ? array() : (array) $item->classes;
21. $classes[] = ($args->walker->has_children) ? 'dropdown' : '';
22. $classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
23. $classes[] = 'menu-item-' . $item->ID;
24. if( $depth && $args->walker->has_children ){
25. $classes[] = 'dropdown-submenu';
26. }
28. $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter( $classes ), $item, $args ) );
29. $class_names = ' class="' . esc_attr($class_names) . '"';
31. $id = apply_filters('nav_menu_item_id', 'menu-item-'.$item->ID, $item, $args);
32. $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
34. $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
36. $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
37. $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr($item->target) . '"' : '';
38. $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
39. $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr($item->url) . '"' : '';
41. $attributes .= ( $args->walker->has_children ) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
43. $item_output = $args->before;
44. $item_output .= '<a' . $attributes . '>';
45. $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
46. $item_output .= ( $depth == 0 && $args->walker->has_children ) ? ' <b class="caret"></b></a>' : '</a>';
47. $item_output .= $args->after;
49. $output .= apply_filters ( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
51. }
53. }

then web goto dashboard->Appearance->Menus and create primary menu and save it