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:
Next, we register the 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
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:
The default/sample navwalker code looks like this:
We’re going to edit that block to use the classes of our bootstrap navbar:
Next, we’ll create the index.php file to output