[ WordPress Tips ] Adding Bootstrap Dropdown Menu

Adding Bootstrap Dropdown Menu Summary:

1. Download the custom wordpress nav walker class: wp-bootstrap-navwalker file wp-bootstrap-navwalker.php .
2. Put the PHP file at your wordpress theme’s root directory.
3. Include the codes into functions.php by:
   
   <span class="pl-s1"><span class="pl-k">require_once</span>(<span class="pl-s"><span class="pl-pds">'</span>wp-bootstrap-navwalker.php<span class="pl-pds">'</span></span>);</span>

   1	<span class="pl-s1"><span class="pl-k">require_once</span>(<span class="pl-s"><span class="pl-pds">'</span>wp-bootstrap-navwalker.php<span class="pl-pds">'</span></span>);</span>

4. Adding a new parameter in your wp_nav_menu function to use the custom nav walker class: 'walker' => new WP_Bootstrap_Navwalker() 
5. Go to wordpress admin panel -> Appearance -> Menu and add sub-menus.

Motivation:

Bootstrap dropdown menu is a wonderful thing for your site viewers to access your important subpages directly.

For example, I built a “Taiwan Bike Routes Map” as an important subpage for my “Cycling” category. Yet without a dropdown menu I could only put the links in the homepage as well as in one “Cycling” post. Not very convenient for my viewers to directly access the page.

My “Taiwan Bike Routes Map” homepage entry. Without the dropdown menu it is hidden within the homepage content.

With Boostrap dropdown menu, now my viewers can directly access “Taiwan Bike Routes Map” by:

1. Expand “Cycling” menu.
2. Directly see “Taiwan Bike Routes Map” in the submenu.

Problem Using Bootstrap Dropdown Menu in WordPress

Unfortunately so far wordpress has yet to integrate Bootstrap dropdown menu properly. In the admin panel -> Appearance -> Menus you can add submenus, but it will not hide properly and make your site looks ugly.

Default wordpress submenus, taking too many white spaces.

Solution: Custom Class

Thanks to the wordpress community, now there is a custom wordpress nav walker class that we can directly use by downloading it from Github: wp-nav-walker.

1. Get the file

Simply download the entire package and copy just the file wp-bootstrap-navwalker.php to your theme’s root folder (remember to set the proper ownership and permission!).

2. Let wordpress recognize the file

Then you need to let wordpress recognize the codes inside wp-bootstrap-navwalker.php. Simply require it in the beginning of functions.php :

3. Tell the particular menu (ex: header menu ) to use the custom nav walker class

At this point the custom nav walker class is ready for use, but you need to specify which menu needs to use such class. You do so simply by specifying the class as a parameter in wordpress’ menu function wp_nav_menu.

As an example, here is the function and its parameters in my site:

Where 'fallback_cb' links to function to execute if the menu does not exist, and 'walker' specifies the custom nav walker class used.

With the above steps, your submenus now should show properly as Bootstrap dropdown menu!

Also Recommended:

[Tutorial #5] Bring WordPress Live

[WordPress Tools] Two Awesome WordPress Development Plugins

Building a WordPress Multiple Topics Blog

Like My Posts? Subscribe at the Bottom and Get Latest Post Update!