Bootstrap Navbar with Dropdowns for Genesis and WordPress

UPDATED 2015/05/06 – See How To Integrate Bootstrap Navbar inot WordPress Genesis Framework

After writing my first post (click here to see that article) on adding the bootstrap navbar to Genesis and WordPress where I didn’t add dropdown capability, I decided to dig in and figure out how to add the dropdowns. This is what I did.

First, I looked on bootstrap’s website to see what classes were necessary to add to the menu markup. The <li> containing the <ul> submenu needed the class “dropdown.” WordPress adds the class “menu-item-has-children.” Found in the Walker_Nav_Menu class the filter ‘nav_menu_css_class’ I could hook too.

add_filter('nav_menu_css_class', 'mry_add_dropdown');
function mry_add_dropdown($classes) {
   if(in_array('menu-item-has-children',$classes) ){
		$classes[] = 'dropdown';
   }
   return $classes;
}

For the <a> tag of the dropdown, I needed to add a class of “dropdown-toggle” and an attribute “data-toggle” with the value “dropdown” Again, in the Walker_Nav_Menu I found another filter I could hook too: ‘nav_menu_link_attributes’.

//* giving a priority of 10. The 2 says I want the $item argument as well. This argument tells me if it's under the li that has children
add_filter('nav_menu_link_attributes', 'mry_link_attributes',10,2);
function mry_link_attributes($atts,$item){
	if(in_array('menu-item-has-children',$item->classes)) {
                //this tag does not have the class nor the data-toggle attributes, so we add them
		$atts["class"] = "dropdown-toggle";
		$atts["data-toggle"] = "dropdown";
	}
return $atts;
}

The last change I needed to the markup was to add to the <ul> containing the submenu the class “dropdown-menu.” In WordPress, the class “sub-menu” is added. This appears hard coded in the Walker_Nav_Menu class and no filters to hook with, so I had to create a child class of the Walker_Nav_Menu class and then override a single function. (Special thanks to StackOverflow. This link was very helpful.

class mry_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent
\n";
  }
}

To have the the theme use my walker I just had to add ‘walker’ => new mry_Walker_Nav_Menu() to the wp_nav_menu $arg array. Here’s that code from my previous article with the added walker.

add_action( 'genesis_header', 'custom_do_nav' ,5);
function custom_do_nav() {
wp_nav_menu(array(
'menu' => 'Primary Navigation',
'container' => 'nav',
'container_class' => 'navbar navbar-default navbar-static-top',
'menu_class' => 'nav navbar-nav navbar-right',
'menu_id' => 'navigation',
'items_wrap' => '  
  

      
        Toggle navigation
        
        
        
      
    
 
%3$s
',
'walker' => new mry_Walker_Nav_Menu()
));
} 

After confirming that my markup had the elements, classes, and attributes needed for the Bootstrap navbar, I went and downloaded the css and javaScript from Bootstrap (you can select only the functionality you want to download). Added the css to my existing bootstrap.css file from the previous article and then enqueued the bootstrap javascript in the functions.php file.

add_action( 'wp_enqueue_scripts','mry_enqueue_scripts');
function mry_enqueue_scripts() {
	wp_enqueue_script( 'bootstrap-script',get_stylesheet_directory_uri() . '/js/bootstrap.js',
		array( 'jquery' ) );
      ...other...scripts....
}

It worked!