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:

HTML

Next, we register the navwalker:

PHP

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

PHP

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:

HTML
HTML

The default/sample navwalker code looks like this:

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

HTML

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