How To Add Bootstrap Dropdown Class In Wordpress Menu Item? Tweet

Either you are working on a wordpress theme development or just want to replace the regular wordpress menu style by bootstrap navbar, getting the first level menu is easy but when you have second level menu and you want to display it like you do for bootstrap designs becomes painful for most of the developers. You can find a lot of solutions online on how to add bootstrap navigation on wordpress but when you search for the solutions to add bootstrap dropdown class in wordpress menu, the results might not be the one you were searching for. Even if you managed to find some articles on the same topic, you might get lost in the words.

Here, we're giving you the easiest solution to add bootstrap dropdown class in wordpress menu item. Let's see how you add the bootstrap navigation first. The first thing you should do to add bootstrap styles and scripts to any wordpress theme is enqueue bootstrap scripts and styles to your theme. Then, wrap up the wordpress wp_nav_menu() function by bootstrap classes to get bootstrap navbar in wordpress. A basic example is below.

<header>
	<nav class="navbar">
		<div class="navbar-header">
			<button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
				<i class="icon-bar"></i>
				<i class="icon-bar"></i>
				<i class="icon-bar"></i>
			</button>
			<a href="<?php echo get_bloginfo( 'wpurl' ); ?>" class="navbar-brand">
				<img src="<?php echo( get_header_image() ); ?>">
			</a>
		</div>
		<div id="mainNav" class="collapse navbar-collapse">	
			<?php wp_nav_menu(); ?>					
		</div>
	</nav>
</header> 

Once you have placed these codes in your wordpress theme's header.php file after those bootstrap stylesheet and scritps enqueued, you can see the bootstrap navigation in your wordpress frontend pages. Now, the only worry would be to follow it up with a bootstrap dropdown menu. Wordpress adds a submenu's class as sub-menu while you need it to be dropdown-menu. You can replace this class from wp-includes/class-walker-nav-menu.php where you can find a class as shown below.

public function start_lvl( &$output, $depth = 0, $args = array() ) {
	if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
		$t = '';
		$n = '';
	} else {
		$t = "\t";
		$n = "\n";
	}
	$indent = str_repeat( $t, $depth );

	// Default class.
	$classes = array( 'sub-menu' );

	/**
	 * Filters the CSS class(es) applied to a menu list element.
	 *
	 * @since 4.8.0
	 *
	 * @param array    $classes The CSS classes that are applied to the menu `<ul>` element.
	 * @param stdClass $args    An object of `wp_nav_menu()` arguments.
	 * @param int      $depth   Depth of menu item. Used for padding.
	 */
	$class_names = join( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
	$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

	$output .= "{$n}{$indent}<ul $class_names>{$n}";
}	

But, it doesn't allow you to add the class="dropdown" data-toggle="dropdown" inside the anchor tag of its parent <li> which is a must for bootstrap dropdown style to be funtional.

So, the easiest solution would be to use jquery in this case and it doesn't even require you to modify the wp-includes/class-walker-nav-menu.php file. You can add a new class in your functions.php file to check if the menu item has children and then add attributes to that item. Here's the javascript that you need to add in your wordpress theme's footer.php file.

<script>
    $(document).ready(function(){
        $("ul.sub-menu").parent().addClass("dropdown");
        $("ul.sub-menu").addClass("dropdown-menu");
        $("ul#menuid li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $('.navbar .dropdown-toggle').append('<b class="caret"></b>');
        $('a.dropdown-toggle').attr('data-toggle', 'dropdown');
    });
</script>

Replace the highlighted text i.e. the menu id displayed here with your wordpress theme's menu id and everything will be sorted out on it's own.