- Adding Bootstrap Dropdown Menu Summary:
- Motivation:
- Problem Using Bootstrap Dropdown Menu in WordPress
- Solution: Custom Class
- 1. Get the file
- 2. Let wordpress recognize the file
- 3. Tell the particular menu (ex: header menu ) to use the custom nav walker class
- 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!
Adding Bootstrap Dropdown Menu Summary:
- Download the custom wordpress nav walker class: wp-bootstrap-navwalker file
wp-bootstrap-navwalker.php
. - Put the PHP file at your wordpress theme’s root directory.
- Include the codes into
functions.php
by:
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> - Adding a new parameter in your
wp_nav_menu
function to use the custom nav walker class:'walker' => new WP_Bootstrap_Navwalker()
- 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:
- Expand “Cycling” menu.
- 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
:
1 |
require_once('wp-bootstrap-navwalker.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:
1 2 3 4 5 6 7 8 |
wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'nav', 'container_class' => 'navbar-collapse collapse', 'menu_class' => 'nav navbar-nav navbar-right', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), ) ); |
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!