How To Create A Navbar With Bootstrap 4 In WordPress

The navigation bar at the top of a website is arguably the most important element of a website. And with Bootstrap, you can create a responsive and good looking navbar within minutes without breaking a sweat. However, if you're using WordPress in your backend, it can be a bit tricky to integrate the Bootstrap navbar into it. In this article, I'll show you how to create a navbar with Bootstrap 4 in WordPress in a few easy steps. 🤓

Need to install WordPress first? Check out my tutorial using XAMPP!

Integration with Bootstrap 3

To understand what we're doing in detail, we first need to go back in time to the days of Bootstrap 3... 👀 As you may or may not know, a WordPress menu is generated on your web page using the built in wp_nav_menu() function. On its own, you simply have an unordered list. However, the function offers a wide array of parameters that the user can employ to customise the menu, like theme_location and item_spacing.

Furthermore, the real power of this function lies in its ability to let developers add custom classes and ids to the generated WordPress menu. 💪 Naturally, you could easily integrate Bootstrap 3 formatting into your navbar by adding the necessary classes and id attributes. Unfortunately, things aren't as straightforward with Bootstrap 4.

Changes in Bootstrap 4

When the 4th iteration of the UI framework was released, the formatting of the navbars was modified. The main difference? Now the menu list itself also had Bootstrap specific classes and ids, which was previously not the case. In the 3rd version, only the divs surrounding the unordered menu list required classes... So what's the big deal, you may ask? 🤔

Well, the wp_nav_menu() function only allows for custom attributes in the tags surrounding the menu list. Not for the menu itself. 😱 Fortunately, wp_nav_menu() allows for much deeper customisation by inserting a custom walker class (i.e. an object) as a parameter. And even better, someone already created a solution for our problem using this class, specifically for Bootstrap!

Installing WP Bootstrap Navwalker

The ready made solution I'm talking about is WP Bootstrap Navwalker. It's fully compliant with all Theme Review guidelines for wordpress.org submission. 😎 So how do we go about installing this baby?

First of all, download the zip file from its Github page. After you've extracted the folder from it, open your functions.php file in your website folder and insert the following line in it:

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

With this line you're registering WP Bootstrap Navwalker in your project. Next, go to your PHP file containing the wp_nav_menu(), usually in header.php, and make the following changes to it:

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

Et voilà! The deed has been done. 😁 As you can see above, we inserted the WP Bootstrap Navwalker class at the very end. We even have a navbar to fall back on in case it fails to load. Lastly, make sure that the container_id value matches the value for data_target in the surrounding div tag. Otherwise, you mobile navbar may not expand at all.