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.


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.

18 thoughts on “Integrate Bootstrap NavBar 4 Into WordPress Theme

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

    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?

    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.

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

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

    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.

Leave a Reply