Business Theme Pt 1: The Header

Build a WordPress Theme Using Bootstrap 4.0

We’re going to build a wordpress theme using a free bootstrap template. First, we download the template from Startbootsrap.com. We’re going to use the Business Frontpage template, which can be downloaded here. Download the and unzip the file, open the directory, and see what’s there.

Next, we create a directory under themes and copy into it the css and vendor folders we’ve just downloaded. We’ll also copy the index.html file. These are the only files we will need.

There are three more things to do to get started. The first is take a screenshot of the Business Frontpage sample, and save it to the new theme directory with the title screenshot. Second, create a file called index.php. It can be left blank for now. Finally, create a file called style.css, and paste the following into that file, making whatever adjustments are necessary.

CSS

Now that this is done, we can go into the wordpress admin and select this theme. When we visit the site, we’ll see a blank page because the index file contains nothing, but we have created working theme.

Next, let’s construct index.php. Copy the contents from index.html and paste into index.php. Save index.php and refresh the site in the browser. We will see the contents of index.html, but without any styling. That’s because the page is looking for the various .css and .js (or, in this case, their containing folders) within the root directory of our site, but these files are actually in the theme directory. We need to add the path to the file by adding this in front of the link url: “<?php echo esc_url( get_template_directory_uri() ); ?>/”

Note: some other tutorials suggest using the bloginfo() function instead. WordPress itself does not recommend this, apparently because this can cause conflicts when using child themes. bloginfo() will always call the parent theme’s template url, and not the child theme’s template url.

We also want to add the theme’s style.css file. For that, we once again use the bloginfo() function with the parameter ‘stylesheet_url’. Our header links now look like this:

HTML

We need to do the same for the linked .js files in the footer. These should be just above the closing </body> tag.

HTML

One last addition to the footer.php file is to call wp_footer. What this will do is load the admin bar. It’s not necessary for functionality and can only be seen by logged-in users, but it is handy for admins and editors, and also makes the theme WordPress standards compliant. To do this, we add the following: “<?php wp_footer(); ?>” just above the closing </body> tag. Our finished footer.php file now looks like this:

HTML

Once this is done, save and refresh the page. It should look identical to the template sample. If it doesn’t, it’s likely we’ve made a mistake in the links somewhere and something isn’t loading. Click view source and examine the rendered links. A common mistake is to leave off the forward slash after calling the site or template url.

Create header.php and footer.php

We are going to start building our template. Take the navbar and everything above it, cut it from index.php and paste this into a new file called header.php. Save header.php in the theme’s directory.

At the top of the index.php file, paste:

HTML

Now go to the bottom of index.php and select the <footer> element and everything below it, copying it to a file called footer.php and replacing it with

HTML

Save footer.php. index.php, and header.php. When we refresh the page, it should be exactly as it was before.

<body> tag

We are going to replace the “<body>” tag with a snippet of code that will call up the proper WordPress body classes, and that will also fire the wp_body_open action, which is where we will load google analytics and other code. (We’ll get to all of that later).

Replace the <body> tag with the following:

<body <?php body_class(); ?>>
 
    <?php
    if ( function_exists( 'wp_body_open' ) ) {
        wp_body_open();
    }
    ?>

Note: wp_body_open is being used in an if statement. In this case, it will only load if it exists on the theme’s functions.php. Currently, it doesn’t, and so this action will not fire, but we are putting this code in here for WordPress theme standards compliance.

Navbar

Add the site title & url

Here is what our navbar currently looks like, from header.php:

HTML

We are going to replace Start Bootstrap site title with the site name and homepage url. The section of code we are going to edit is “<a class=”navbar-brand” href=”#”>Start Bootstrap</a>” We will be using the bloginfo() function.

For the site name, we use the bloginfo() function with parameter ‘name’; replace “Start Bootstrap” with “<?php bloginfo(‘name’); ?>”

For the url, we could use the bloginfo() function with the parameter ‘url’. However, wordpress theme requirements require we use “echo esc_url( home_url() )” instead if we want to be compliant with official wordpress standards. Further explanation for this is given here.

HTML

Navwalker menu

Next, we are going to replace the navigation menu with wordpress’ navigation menu.

In order to make this work, we will download and use a utility called “navwalker”. From the navwalker repository on github: navwalker “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.” Go here to download navwalker.

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, we unzip the downloaded file, open the directory, and copy the file “class-wp-bootstrap-navwalker.php” to our theme’s directory.

Next, we will need to include this file on functions.php. Instructions for this are found on the navwalker github page. Create and save a file titled functions.php to our theme’s directory. Add the following to that file:

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

Next, we create a menu in wordpress, and assign it to the location titled ‘Primary’.

Now we are ready to add our menu to the header. The code we are going to replace is this list and the div that contains it:

HTML

On the navwalker repository, we are given a block of code with which to replace the above. That code, below, will need some editing before it’s ready. The edits are to replace the classes and ids in the code below with the ones used in our theme.

HTML

Let’s go through this snippet line by line. The second line tells us that the menu location is ‘primary’. That’s what we want, because on functions.php we registered a menu with a location named primary, and that’s the menu we assigned in the admin. The menu location can have any name. It just needs to be consistent in all of these files.

Line 4 is container = ‘div’. This is appopriate; we are using this to generate the div that contains the nav walker.

Line 5 is the container classes. Referring to the list we are replacing, we see that the container classes are ‘collapse navbar-collapse’. The snippet of code supplied by navwalker indicates that the container will be assigned the classes ‘collapse navbar-collapse’. These match, so no edit is necessary. If they did not match, edit the navwalker snippet to match the template container classes. For example, if the template container was this: “<div class=”pumpkin john-smith” id=”navbarResponsive”>, you would edit the snippet to read ‘container_class’ => ‘pumpkin john-smith’.

Line 6 is the container id. It reads ‘container_id’ => ‘bs-example-navbar-collapse-1’. The container on our template is ‘navbarResponsive’ Edit the snippet to match the template.

Line 7 assigns the menu class – the class(es) to the <ul> element, in other words. Our template <ul> has the classes “navbar-nav ml-auto”. The snippet assigns the classes ‘navbar-nav mr-auto’. Replace these with the classes assigned by the template. (the difference is that mr-auto is replaced by ml-auto. These classes determine alignment).

Site title

Now let’s replace the hardcoded title with the site title. All themes should utilize WordPress’s built-in functionality to generate the title tag, which is enabled by adding this code to your functions.php file: “add_theme_support( 'title-tag' );” Having done that, we then add “<?php wp_head(); ?>” to the header.

The finished (for now) header looks like this:

HTML