Bootstrap Navwalker

Navwalker

Navwalker, according to its developers, “is a utility class that is intended to format your WordPress theme menu with the correct syntax and CSS classes to utilize the Bootstrap dropdown navigation. It does not include the required Bootstrap JS and CSS files – you will have to include them manually.” In other words, Navwalker is a script that will allow us to implement a bootstrap navbar in a wordpress theme. Download the script here. Unzip the downloaded file and copy the file class-wp-bootstrap-navwalker.php to the wpstrap theme directory.

Note: Be sure to download the latest stable version of navwalker, and be sure to follow their instructions, using common sense and these as a reference. As bootstrap changes, navwalker also changes. This tutorial is up-to-date as of January 2021, using Bootstrap v4.6 and Navwalker 4.0.

Add to Functions.php

Now that the file is in our theme directory, we need to include it when pages load. We do this by requiring it on functions.php. Add this to the top of the functions.php file, just under <?php:

<?php

      require_once('wp-bootstrap-navwalker.php');

Next, we register the navwalker:

/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

We will also need to declare a new menu in our functions.php file (if one doesn’t already exist). Add the following to functions.php

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

Once that’s done, we can create a menu in the admin and assign it to the location “Primary Menu” (You can name that location whatever you’d like. “Header Menu” might also be a good name.

Add navwalker menu

Our bootstrap menu looks like this:

<div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="post.html">Sample Post</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>

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(),
) );

The default/sample navwalker code looks like this:

We’re going to edit that block to use the classes of our bootstrap navbar:

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

Next, we’ll create the index.php file to output

Posted by Geoff on February 7, 2021