├── readme.md
└── wp-bootstrap-navwalker.php


/readme.md:
--------------------------------------------------------------------------------
 1 | wp-bootstrap-navwalker
 2 | ======================
 3 | 
 4 | **A custom WordPress nav walker class to fully implement the Bootstrap 3.0+ navigation style in a custom theme using the WordPress built in menu manager.**
 5 | 
 6 | This version adds the support for multi level dropdowns with titles and descriptions.
 7 | 
 8 | NOTE
 9 | ----
10 | This is a utility class that is intended to format your WordPress theme menu with the correct syntax and classes to utilize the Bootstrap dropdown navigation, and does not include the required Bootstrap JS files. You will have to include them manually. 
11 | 
12 | Installation
13 | ------------
14 | Place **wp_bootstrap_navwalker.php** in your WordPress theme folder `/wp-content/your-theme/`
15 | 
16 | Open your WordPress themes **functions.php** file  `/wp-content/your-theme/functions.php` and add the following code:
17 | 
18 | ```php
19 | // Register Custom Navigation Walker
20 | require_once('wp_bootstrap_navwalker.php');
21 | ```
22 | 
23 | Usage
24 | ------------
25 | Update your `wp_nav_menu()` function in `header.php` to use the new walker by adding a "walker" item to the wp_nav_menu array.
26 | 
27 | ```php
28 |  <?php
29 |           $args = array(
30 | 		  'theme_location' => 'primary',
31 | 		  'depth' => 0,
32 | 		  'container' => '',
33 | 		  'menu_class'  => 'nav navbar-nav',
34 | 		  'walker'  => new BootstrapNavMenuWalker()
35 |           );
36 |     wp_nav_menu($args);
37 |         ?>
38 | ```
39 | 
40 | Your menu will now be formatted with the correct syntax and classes to implement Bootstrap dropdown navigation. 
41 | 
42 | You will also want to declare your new menu in your `functions.php` file.
43 | 
44 | ```php
45 | register_nav_menus( array(
46 | 	'primary' => __( 'Primary Menu', 'THEMENAME' ),
47 | ) );
48 | ```
49 | 
50 | Typically the menu is wrapped with additional markup, here is an example of a ` navbar-fixed-top` menu that collapse for responsive navigation.
51 | 
52 | ```php
53 | <nav class="navbar navbar-inverse navbar-fixed-top">
54 |   <div class="container">
55 |         <div class="navbar-header">
56 |                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bootstrap-nav-collapse">
57 |                         <span class="sr-only">Toggle navigation</span>
58 |                         <span class="icon-bar"></span>
59 |                         <span class="icon-bar"></span>
60 |                         <span class="icon-bar"></span>
61 |                 </button>
62 | 
63 |  <a class="navbar-brand" id="logo" href="<?php echo site_url(); ?>"><img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" class="img-responsive logo"/></a>
64 | 
65 |         </div><!-- /. navbar-header -->
66 |             <!-- Collect the nav links from WordPress -->
67 |   <div class="collapse navbar-collapse" id="bootstrap-nav-collapse">         
68 |   <?php $args = array(
69 |           'theme_location' => 'primary',
70 |           'depth' => 0,
71 |           'container' => '',
72 |           'menu_class'  => 'nav navbar-nav',
73 |           'walker'  => new BootstrapNavMenuWalker()
74 |           );
75 |     wp_nav_menu($args);
76 |   ?>
77 |   </div><!-- ./collapse -->
78 |           </div><!-- /.container -->
79 |         </nav>
80 | ```
81 | 
82 | To change your menu style add Bootstrap nav class names to the `menu_class` declaration.
83 | 
84 | Review options in the Bootstrap docs for more information on nav classes
85 | http://getbootstrap.com/components/#nav
86 | 
87 | Displaying the Menu 
88 | -------------------
89 | To display the menu you must associate your menu with your theme location. You can do this by selecting your theme location in the *Theme Locations* list wile editing a menu in the WordPress menu manager.
90 | 
91 | Displaying the Titles and Descriptions 
92 | -------------------
93 | To display the menu item descriptions you need to click the tab **Screen Options** at the top of the screen and check "Title Attribute" and "Descriptions". The title attribute is part of the menu ite's link. the description text is not inside the menu item's link so you can add text here.
94 | 
95 | 
96 | 
97 | Original work by johnmegahan https://gist.github.com/1597994, Emanuele 'Tex' Tessore https://gist.github.com/3765640
98 | 
99 | 


--------------------------------------------------------------------------------
/wp-bootstrap-navwalker.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 | * Extended Walker class for use with the Twitter Bootstrap toolkit Dropdown menus in Wordpress.
  4 | * Edited to support n-levels submenu and Title and Description text.
  5 | * @author @jaycbrf4 https://github.com/jaycbrf4/wp-bootstrap-navwalker  
  6 | *  Original work by johnmegahan https://gist.github.com/1597994, Emanuele 'Tex' Tessore https://gist.github.com/3765640
  7 | * @license CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
  8 | */
  9 | class BootstrapNavMenuWalker extends Walker_Nav_Menu {
 10 | 	
 11 | 	function start_lvl( &$output, $depth = 0, $args = array() ) {
 12 |  
 13 | 		$indent = str_repeat( "\t", $depth );
 14 | 		$submenu = ($depth > 0) ? ' sub-menu' : '';
 15 | 		$output	.= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\" >\n";
 16 |  
 17 | }
 18 |  
 19 | function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
 20 |  
 21 | 	$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 22 | 	 
 23 | 	$li_attributes = '';
 24 | 	$class_names = $value = '';
 25 | 	 
 26 | 	$classes = empty( $item->classes ) ? array() : (array) $item->classes;
 27 | 	// managing divider: add divider class to an element to get a divider before it.
 28 | 	$divider_class_position = array_search('divider', $classes);
 29 | 	if($divider_class_position !== false){
 30 | 	$output .= "<li class=\"divider\"></li>\n";
 31 | 	unset($classes[$divider_class_position]);
 32 | 	}
 33 | 	$classes[] = ($args->has_children) ? 'dropdown' : '';
 34 | 	$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
 35 | 	$classes[] = 'menu-item-' . $item->ID;
 36 | 	if($depth && $args->has_children){
 37 | 	$classes[] = 'dropdown-submenu';
 38 | }
 39 |  
 40 |  
 41 | 	$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
 42 | 	$class_names = ' class="' . esc_attr( $class_names ) . '"';
 43 | 	 
 44 | 	$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
 45 | 	$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
 46 | 	 
 47 | 	$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
 48 | 	 
 49 | 	$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
 50 | 	$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
 51 | 	$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
 52 | 	$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
 53 | 	$attributes .= ($args->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : ''; 
 54 | 	 
 55 | 	$item_output = $args->before;
 56 | 	$item_output .= '<a'. $attributes .'>';
 57 | 	$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
 58 | 			
 59 | 			// add support for menu item title
 60 | 			if (strlen($item->attr_title)>2) {
 61 | 	      		$item_output .= '<h3 class="tit">' . $item->attr_title . '</h3>';}
 62 | 
 63 | 			// add support for menu item descriptions
 64 | 			if (strlen($item->description)>2) {
 65 | 	      		$item_output .= '</a> <span class="sub">' . $item->description . '</span>';}
 66 | 
 67 | 	$item_output .= (($depth == 0 || 1) && $args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
 68 | 	$item_output .= $args->after;
 69 | 	 
 70 | 	 
 71 | 	$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
 72 | }
 73 |  
 74 | 
 75 | function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
 76 | 	//v($element);
 77 | 	if ( !$element )
 78 | 	return;
 79 | 	 
 80 | 	$id_field = $this->db_fields['id'];
 81 | 	 
 82 | 	//display this element
 83 | 	if ( is_array( $args[0] ) )
 84 | 	$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
 85 | 	else if ( is_object( $args[0] ) )
 86 | 	$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
 87 | 	$cb_args = array_merge( array(&$output, $element, $depth), $args);
 88 | 	call_user_func_array(array(&$this, 'start_el'), $cb_args);
 89 | 	 
 90 | 	$id = $element->$id_field;
 91 | 	 
 92 | 	// descend only when the depth is right and there are childrens for this element
 93 | 	if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
 94 | 	 
 95 | 	foreach( $children_elements[ $id ] as $child ){
 96 | 	 
 97 | 	if ( !isset($newlevel) ) {
 98 | 	$newlevel = true;
 99 | 	//start the child delimiter
100 | 	$cb_args = array_merge( array(&$output, $depth), $args);
101 | 	call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
102 | 	}
103 | 	$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
104 | 	}
105 | 	unset( $children_elements[ $id ] );
106 | 	}
107 | 	 
108 | 	if ( isset($newlevel) && $newlevel ){
109 | 	//end the child delimiter
110 | 	$cb_args = array_merge( array(&$output, $depth), $args);
111 | 	call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
112 | 	}
113 | 	 
114 | 	//end this element
115 | 	$cb_args = array_merge( array(&$output, $element, $depth), $args);
116 | 	call_user_func_array(array(&$this, 'end_el'), $cb_args);
117 |  
118 | 	}
119 | }
120 | 
121 | 


--------------------------------------------------------------------------------