Integrate Bootstrap NavBar 4 Into WordPress Theme

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:

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:

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.

Conclusion

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.

, , , , , , , , , , , , , , , , , , , , ,

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

27 thoughts on “Integrate Bootstrap NavBar 4 Into WordPress Theme

  1. 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!! 🙂

  2. Hi Bishal,

    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 🙂

    1. 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.

  3. 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.

    1. 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

  4. 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/

  5. 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.

    1. For that, from the above tutorial, you just need to replace the code: <span class="navbar-toggler-icon"></span> to: <i class="fa fa-bars"></i> as required for your site, which displays the toggle bar for menu toggle.

    1. 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.

  6. Hi Bishal,
    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 ?

  7. 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…

    Any ideas?

    1. 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:

    1. 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.

    1. 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?

  8. This is awesome, Bishal. However I’m having a problem with the navbar toggler working.

    1. 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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.