Bootstrap, is one of the most popular front-end framework for your site development. It has been used by millions of site for its development. Now, since the major update 4 has been released, there are many changes in this framework. You can find the change log for this here. As you can also notice that, Bootstrap has changed the way it integrates the menu in it. So, here we will discuss about how to integrate Bootstrap NavBar 4 into WordPress theme.
As of earlier for Bootstrap version 3, we have already discussed about how to integrate it in WordPress theme in our previous post. But, if you want to have a look on that instead about how to do it, then, you can find it here.
What is Bootstrap?
First of all, let’s have a surface knowledge on Bootstrap framework, shall we? Well, Bootstrap is the front-end development framework, which is most popular among many of the website developers and designers. It is developed in such a way, in which the mobile first friendly step is taken.
While you develop a theme via Bootstrap, then, your site will be automatically mobile friendly since this framework is mobile friendly. It also has lots of integrated features inside it just like, tabs, carousels, etc. So, due to this, you may rarely require any of the other JS library at all for your site development.
Also, this framework, Bootstrap, is hosted on GitHub too, you can find it here. It means that, it is open source compatible and anyone can contribute on it’s development.
How to Integrate Bootstrap NavBar 4 into WordPress theme?
Now, since you have the surfaced background on Bootstrap, you may notice that, it has different way in displaying the NavBar than the native WordPress way, right? Well, if you could not notice then, you can find about it here, in their documentation. Now, you will clearly notice that it is totally different.
Now, you may be in confusion about how to do it, right? Well, do not get confused on this. Here, we will be discussing about how to do it. So, why the wait, let’s move ahead and integrate Bootstrap NavBar 4 into your built WordPress theme.
First of all, what you have to do is, you can download the Bootstrap NavWalker class from here. Now, after that, you can copy the file bootstrap-navwalker from that repo inside your theme’s directory, ie, inside /wp-content/themes/theme-name/ folder.
Now, after you have added that file inside the theme’s folder, you need to require that function as in the below PHP code, adding it in the functions.php file of your theme:
require get_template_directory() . '/bootstrap-navwalker.php';
After that, assuming that you have already registered the nav menu for your theme, now, let’s move ahead and integrate Bootstrap NavBar 4 for your theme. For that, what you have to do is, you need to call that newly created class via the
wp_nav_menu() function as in the below example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="<?php esc_html_e( 'Toggle Navigation', 'theme-textdomain' ); ?>">
<div class="collapse navbar-collapse" id="navbar-content">
'theme_location' => 'menu-1', // Defined when registering the menu
'menu_id' => 'primary-menu',
'container' => false,
'depth' => 2,
'menu_class' => 'navbar-nav ml-auto',
'walker' => new Bootstrap_NavWalker(), // This controls the display of the Bootstrap Navbar
'fallback_cb' => 'Bootstrap_NavWalker::fallback', // For menu fallback
Congratulation, now if you have successfully done as same in this, then, you can now successfully integrate Bootstrap NavBar 4 for your WordPress theme.
Output after you integrate Bootstrap NavBar 4 for your WordPress theme
Now, after you have successfully integrate Bootstrap NavBar 4 for your WordPress theme, then, you may like to know about how will it be displayed for your site, right? Well, we will make this clear for you too. You can see the similar result as below for your site too:
If you want to learn about how to assign the menu to particular menu location area provided via the theme, then, you can follow this link.
Now, if you have followed this tutorial properly and was able to integrate Bootstrap 4 NavBar into your WordPress theme properly, without any issue at all, then, we can assume that you are now more familiar about integrating it to your theme than before. But, if you are still confused on this and want more help on this, then, do drop the comment below in the comment box and we will follow it up.
41 thoughts on “Integrate Bootstrap NavBar 4 Into WordPress Theme”
I have integrated the bootstrap 4 menu for wordpress with navwalker. Now everything is working fine except that on smaller screen when button is displayed for menu, on clinking the button , menu is displayed only for fraction of a second and then disappears.
It might be due to the conflict on theme JS with that of the plugin used within your site. So, maybe give it a try once deactivating the used plugin within your site and see if that helps to identify the culprit plugin?
Really good ! Thank you guy !
Hello. I have followed your tutorial from the beginning to the end, but i do not get the bootstrap navbar like I should. I can still see it almost exactly like before, all the bullet-points, I’m using a generated theme from underscores .me and i didn’t really change any code yet…
thank you for your help!
You need to enqueue Bootstrap library files, ie, the required JS and CSS library files provided via Bootstrap, to work with Bootstrap framework. This link: https://getbootstrap.com/docs/4.3/getting-started/introduction/ should help you identify about what are the required CSS and JS files to work with it. So, ensure everything is loaded fine via your theme and check for the navigation. It should work fine after those tasks are done.
Thank you for your guidance. I just want to know how should I make the navigation bar transparent so that background image is revealed.
You need to apply the CSS code as below within your theme style file to do so:
However, maybe in your case, the selector maybe different. So, can you follow this link: https://napitwptech.com/tutorial/apply-custom-css-code-site-via-inspect-element/ to know about what selector to use for your theme to achieve the same goal?
Hej Bishal, everything seems to be working just fine, but then finally publishing the menu does not work — i just keep getting » add menu « — do you know what the problem there could be?
Did you assign the created menu within your site, to the required menu location provided via the theme?
When I’m using wp-bootstrap-navwalker class in my WordPress theme customizer button is not showing. How to enable customizer button
Adding this library file within your theme will not create such issue at all. So, maybe you have coded something wrongly within your theme. So, maybe check once again on your codes and see if that helps you out to figure about what is creating that issue?
works very well. thank you so much
Thank you, Good post !
Thank you so much Bishal!
The slim.min.js files kept throwing errors, but when I switch to regular jquery.js it now works. I guess I can minify it later.
Many thanks!! ?
Great tutorial! If you have time, I believe I have followed your instructions correctly, but the toggle function does not seem to be working for me. When I look in dev tools the sub-menu is set to ‘display:none’. I’m not sure how to correct this.
My website is http://staging.millenfarm.org/
Thank you in advance 🙂
While checking out your site, I could see that there is JS console error for your site. So, could you once check and manage that as needed and see if it can help you out? Also, the toggle button seems to be already seen for your site but not working probably due to the issue I mentioned previously.
Hi! First of all Thanks for the guide, how can i increase the level of the navbar, It shows me just one dropdown level, and in my site i need another level in the dropdown, a dropdown in a dropdown, I´m very new in this, i really hope that you can help me.
Since Bootstrap 4 by default, only supports 1 level sub-menu. Hence, I opted the same in this Bootstrap Navwalker class too. So, if you want multilevel menu with many depths then, you need to modify the above code:
'depth' => 2,to the required number of depth.
Additionally, you will probably require some CSS and JS to make that function properly, which maybe you can find it here: https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation
Hope you still answer these comments, but tried your tutorial and it worked. Question however, on whether you can make the navigation dropdown automatically show without “clicking” to make it appear, and if there’s a way to allow users to click the top tier menu as well. This site for instance, you should be able to click the “About Me” page to load its own page, but right now clicking it simply shows the dropdrown. http://kaiserthegreat.com/kitchen/
For that, for the display of submenu on hover, can you follow this link: https://stackoverflow.com/questions/48820404/bootstrap-4-keeping-parent-of-dropdown-a-clickable-link and for the parent menu to link to the menu, you need to edit the library file included, removing the code:
$atts[ 'href' ] = '#';which is already present in it. Hope this works out for you.
Thanks a lot. Earlier implementing the navigation menu was much easier. With bootstrap 4 its a kind of mess and thanks for your well explained tutorial. Bootstrap4 uses an svg image to display the hamburger icon which is harder to customise. I use icons from font-awesome. Could you please tell us how implement font-awesome icons(replacing the default bootstrap svg image) in WordPress menu.
For that, from the above tutorial, you just need to replace the code:
<i class="fa fa-bars"></i>as required for your site, which displays the toggle bar for menu toggle.
everything worked just fine but when i click on the hamburger menu it doesn ‘t drop down,
here you have my site : http://cerises.artplaylocal.org/
Tks for your support
I checked out your link and it seems to be working without any issue.
but that makes other plugins not working properly anymore.. What can be done instead of inclduing new jquery?
For Bootstrap framework to work out properly, you need to include all of its necessary components, ie, JS, CSS and Popper JS. If none of them is included then, it will not function as it should. So, maybe, you need to figure out which plugin is creating up the issue and remove those. Hope this helps.
Loved the way nav has been implemented. Thanks for the post.
Works exactly the way it is supposed to.
However, I’m curious to find out if there’s any way to change or modify the navbar template, like adding navbar brand image ?
You just need to follow their navbar documentation: https://getbootstrap.com/docs/4.0/components/navbar/ where they have mentioned all of the possibilities of the Bootstrap NavBar, which you can integrate in your site. Hope this helps.
You should include popper.js and jquery (https://napitwptech.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-3.2.1.slim.min.js) to get work toggle smoothly.
hello, on my side nothing works … css broken …
I’m getting the following error: Warning: require(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in / bla bla bla line number…
Can you tell me about how you have included that file for your theme? It need to be included in the way as below for your theme:
Thank you, Bishal!
Now it works perfectly.
Thank you for your useful learning!
But I have some issue with menu – Bootstrap styles are not applied. Could you please check?
Thank you very much in advance!
I have checked your site and seems to be working fine. However, you seems to be missing to add the Popper JS library for the Bootstrap JS to work properly, ie, some of Bootstrap JS code requires Popper JS too to function properly such as menu toggle.
I think I have the exact same problem. Here is the link to a test site: http://quotenschnauzer.com/serial0001/demo/wordpress/
After pressing the toggle button the menu appears and instantly disappears.
While checking the source code of your site, I could see that you have enqueued Boostrap JS library of version 3.3.7, while you need to enqueue the Bootstrap version of 4.0.0 beta for it to work. So, can you enqueue the correct version of Bootstrap JS, ie, 4.0.0 beta and later to check for the same?
This is awesome, Bishal. However I’m having a problem with the navbar toggler working.
Have you done exactly the same as in this tutorial, ie, from the HTML structure to the PHP code implementation properly? Also, if you could provide me the link to your site in which you have implemented it then, I could have the better look on this issue.