Create the theme

We are going to begin by building a new blank bootstrap theme, and then adding a navbar to it.

To begin, create a new directory under themes, and title it wpstrap (or whatever title you would like to give it. In this directory, you will create the two files necessary for a wordpress theme: style.css and index.php.

For the style.css file, add the following, edited, of course, to suit your specifics:

For index.php:

Next, go to https://getbootstrap.com and download the compiled css and js files for whatever is your preferred version of bootstrap. For this tutorial, we are using bootstrap v4.6, which is the latest non-beta version. Unzip the file and place the two directories (js and css) in your theme directory.

Now go into wordpress and activate the theme. View the site and you will see a blank page because we have nothing in our theme yet.

Create a fixed top navbar

On https://getbootstrap.com you should see a section labelled components, and under components, navbar. This is where we will get the pieces to build our navbar. Take a moment to look through all the components and familiarize yourself with them, if you are not already familiar with all the bootstrap navbar parts and classes.

In our case, we are going to build a full width, fixed top navbar. This is a navbar that will remain fixed to the top of the page as the user scrolls down the page.

Copy the code and place it in index.php. The code is here:

Index.php now looks like this:

If we refresh the page, we are going to see an unformatted white page that says “Fixed Top” in Times New Roman in the top left corner. That’s because our page is looking for the css directory in the root directory of our site and not in the theme. Fix this by adding the theme to the bootstrap css path:

While we’re at it, let’s add an empty div to the page, styling it inline to have a width of 100% and a height of 2000px, so that we can see that the navbar is fixed. Our index.php file now looks like this:

Refresh the page, and we see a full width light grey navbar containing the words “Fixed top” that remains fixed to the top of the page as we scroll down.

Adding the site title

The title “Fixed top” is the only contents thus far in our navbar. It has a class of .navbar-brand, which, according to bootstrap documentation is “for your company, product, or project name.”

Let’s replace the text with the site name, and a link to the site homepage. These are both done using “<?php bloginfo(); ?>” and passing parameters of ‘name’ or ‘url’, like so:

Add a responsive menu

Now we have a pretty much empty navbar, that only displays the site name. Lets add a menu and a search bar.

Here is the entire navbar, with the new code:

When we refresh the page after adding the navigation menu to the navbar, we are going to see our site title on the left and the hamburger menu on the right. Bootstrap has a variety of responsive behaviors. In this example, the navbarNav div has a classes of “collapse navbar-collapse”. These collapse the menu into the button that is established by the following button code:

If we add the class “navbar-expand-lg” to the nav element, this will expand the menu at the lg breakpoint. If we wanted it to remain forever expanded, we would simply add the class “navbar-expand”. If we wanted it to expand at the medium breakpoint, we would add the class “navbar-expand-md”, and so on.

Add .js to footer

Right now we have a generic one page template. Let’s make a few changes to the template, to divide it into header.php, index.php, and footer.php.

To the bottom of your page, above the </body> tag, lets create a footer. Add the following:

Below that, we need to link to the javascript files that are necessary to make the hamburger menu expand. Add this below the footer we’ve just created:

Separate header and footer into their own files

Now take all that we’ve just added, from the <div class=”container”> through to the </html> tag, remove it from index.php, and add it to a new file called footer.php. Our footer.php file should look like this:

Add the following to the bottom of index.php

Now take the navbar and everything above it, cut it from index.php and add it to a file called header.php. Save that file and replace the removed content on index.php with the following:

When we refresh the page in your browser, it will render just as before, and the hamburger menu will expand. We have now create the three basic theme template elements. The rest of the work we’ll do here will be on header.php

Add the search bar and make it work

To add a search form to the navbar, add the following just after the menu list:

This will create a search box, but it will be in the wrong place, aligning left just after the menu list. We want it to float right instead. To do this, we actually make a change to the menu list by giving it the classes “mr-auto mt-2 mt-lg-0”. Our list now looks like this:

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.

Next, you will need to include this file on functions.php. Instructions for this are found on the navwalker github page. At present, those instructions are add the following to your functions.php file:

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.