How to Integrate a Bootstrap Menu Into your WordPress website

This Tutorial will teach you how to integrate Bootstrap 4 menu in your WordPress Theme. You can use it to make your WordPress Menu Responsive i.e. the menu will be collapsed and toggleable in mobile screens, but for tablets and computer screen (big screens) it will remain fully visible.

Check out my other Bootstrap 4 Tutorials for Beginners:

• What is Bootstrap
• How to Use Bootstrap

Bootstrap Menu

Let start understanding the HTML structure of the Bootstrap menu. The HTML code is like this:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- Brand and toggle button -->
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- End -->
    <!-- Your website Links -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
    <!-- End -->
</nav>

• a. The button, with class navbar-toggler, will be the toggleable button. This will show only on mobile screens and will be invisible for larger screens.
• b. The div, with id navbarSupportedContent, contains the menu items (i.e links). They will show up in horizontal manner on larger screens (Desktops and laptops), but on mobile screens they will come down one below the other (opening and closing option with the toggleable button).

The main problem is that it is a static menu but WordPress menu is dynamic (created from dashboard). So to solve this problem we will be using Nav Walker Class which will automatically convert the WordPress menu structure to that of Bootstrap’s Menu.

Nav Walker Class

To use Nav Walker Class first download wp_bootstrap_navwalker.php from GitHub.

• 1. Place this wp_bootstrap_navwalker.php file in your WordPress theme folder /wp-content/your-theme/.
• 2. Open your functions.php file and register Nav Walker class by adding the below line:

  require_once('wp_bootstrap_navwalker.php');
  

• 3. Register your menu in the functions.php file by adding these below lines:

  /*Navigation Menus*/
  function register_my_menu() {
    register_nav_menu('header-menu',__( 'Header Menu' ));
  }
  add_action( 'init', 'register_my_menu' );
  /*End*/
  

• 4. Add the below code in your theme’s header.php file.

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!-- Brand and toggle button -->
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      <!-- End -->
      <!-- Your website Links -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <?php
               wp_nav_menu( array(
               'menu'              => 'primary',
               'theme_location'    => 'header-menu',
               'depth'             => 2,
               'container'         => 'div',
               'container_class'   => '',
               'container_id'      => '',
               'menu_class'        => 'navbar-nav mr-auto',
               'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
               'walker'            => new wp_bootstrap_navwalker())
               );
          ?>
      </div>
      <!-- End -->
  </nav>
  

Note: I have updated the wp_nav_menu() function by adding fallback_cb & walker item to it.

The menu_class is provided value of navbar-nav mr-autov.

This completes our integration now let us check responsiveness of our menu.

Checking WordPress Bootstrap Menu in Different Screen Sizes

In your WordPress Dashboard create a new menu and assign it’s Theme Locations as Header Menu.

Add a few items to this menu and save it.

Now when you open the website in laptop the menu will be fully visible.

When viewing it in smaller screens of smartphones, it will show up in collapsed and toggleable form.

1. Make sure that you have added bootstrap.css and bootstrap.js files to your theme folder. If yes then follow the next 2 points.

2. Register the bootstrap.css in the “functions.php file by adding the below code –

function theme_scripts() {
    /*Bootstrap style reference*/
    wp_enqueue_style( 'bootstrapCSS', get_template_directory_uri() . '/Bootstrap/bootstrap.css' );
    /*End*/
 
    /*Your theme stylesheet reference*/
    wp_enqueue_style( 'style.css', get_stylesheet_uri() );
    /*End*/
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Note: I also registered my theme’s stylesheet called style.css after bootstrap.css. If your theme has more stylesheets then add separate wp_enqueue_style lines for each of them.

3. Lastly, register jQuery and bootstrap.js file on the functions.php file. The code is:

function theme_js () {
    /*jQuery Reference*/
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', false, '3.1.1');
    wp_enqueue_script('jquery');
    /*End*/
 
    /*Bootstrap js reference*/
    wp_enqueue_script( 'bootstrapJS', get_template_directory_uri() . '/Bootstrap/bootstrap.js', array(), '1.0.0', true );
    /*End*/
 }
add_action( 'init', 'theme_js' );

Bootstrap is easy to use and most popular HTML, CSS, and JS framework for developing responsive website. I would recommend you to use it as it greatly increases the speed of development.

If you like this article then share it with your friends in facebook, twitter and pinterest.