Create a WordPress Theme with Bootstrap 4

If we need to create a WordPress theme from scratch, the right idea is to download the ready to use and free bootstrap 4 Templates from the internet, so we do not need to spend much time creating a bootstrap version first. But if you want to start from scratch, you could do that as well. Creating a WordPress theme is not an impossible task. Although it is not simple and requires some knowledge of PHP, CSS, and HTML.

The WordPress community has created a large number of starter themes or blank themes. This tutorial will use the starter theme called _S or Underscores; this starting theme is created and maintained by Automatic itself. Some 70 developers are continually making improvements to this initial WordPress theme.

STARTING TO CREATE A WORDPRESS THEME WITH BOOTSTRAP 4.

Before starting with the bootstrap 4 download we must first download the starting WordPress theme called Underscores. Underscores or _S is a clean WordPress theme in terms of CSS. It has nothing to do with cooking but it has everything you need to think about PHP coding.

We go to the Underscores site and download the blank theme. The first advantage we find is that we can fill in some useful data for our WordPress theme. We can tell the generator the name of the theme, the item, or the folder’s name. We can also indicate the author’s URL and the description of the theme we want to create. We have other options linked to Sass, but we will cover them in other tutorials.

For our example we will name it Wp Gym, slug wpgym, and some data for the description. Let’s suppose that we already have WordPress installed on our machine, and if we do not have it, you can go through this post: install WordPress locally and then continue with this WordPress guide.

After filling the data in the form on the underscores.me page we click generate and it will download a WordPress theme. This theme will have some basic CSS styles and all the necessary PHP files for proper operation. We are going to install our WordPress theme on the local server. Remember that according to our tutorial we are using xampp on our machine.

If we look at the beginning of the style.css file, we will find all the features that this new theme has; we see this in the tags section. We have a custom-background, a custom logo, and a responsive menu.

Within our WordPress Installation, we select the theme created; in this case, WpGym. We note that it does not have any style but that it works correctly. We can browse the posts, pages, categories, and other PHP files. It is time to get bootstrap 4.

Download Bootstrap 4 to add it to our WordPress Theme.

We go to the bootstrap page and look for the section to download the CSS and js files. We download the files boostramin.css and bootstrapmin.js. After the download, we introduce these files in the CSS and js folders, respectively, of our theme.

Now it’s time to call these new files from our WordPress theme. For this we use the wp_equene_style and wp_equene_script functions that we must add in our functions.php file as follows:

The bootstrapmin.js file is downloaded in the js folder and the boostramin.css file in the CSS folder. Now we can call them from our functions.php file. These files are included in the header of our theme or the footer of the page. This depends on the variables that we put to the wp_equene_style and wp_equene_script functions, respectively. If we already have the bootstrap 4 Templates files included in our theme, we can start using their CSS classes to shape our site.

Creating a responsive menu in our WordPress theme

We notice how inside the header tag of the site, we put the class ” container-fluid “and then we create a row with the class ” row. ” Finally, we create two sections, one with the class “col-md-4” and the other with the class “col-md-8”. In these sections, we place the logo or name of the site and the menu, respectively. You may have already noticed that the classes col-md-4 and col-md-8 add up to 12; this is because of the grid structure that bootstrap has and that it is mobile-first.

In this way the header of our site is already responsive and on a mobile screen you will see the logo occupying the entire screen first and then the hamburger menu.

Working with the Index of our WordPress site.

Now it’s time to modify the blog of the site where we will show a list of entries and a sidebar on the right.

We do this just below the </header> tag, the idea in this case is that the content of the site is encompassed within the css container and row classes.

With this we have created a container around our entire site and in particular around our index.php file. Now we finally open our index.php file and at the beginning of it we make the following modification:

With this, we say that the content of the news will have a width of 8 columns. Now we modify our sidebar’s width to tell it to have a width of 4 columns and thus complete the size of 12 columns that it allows us when creating a WordPress theme with bootstrap 4 .

What we have done so far How is our WordPress Theme?

We already have the site’s header with responsive behavior and now our index.php will be used to display the site’s blog or post list with responsive action.

Now to finish we are going to include the bootstrap 4 classes in our footer.php file.

We add a container inside the footer and a row; then, we will introduce the columns we think are necessary.

We observed that we closed the div that we opened and some HTML tags open from the header.php file. This step is vital since, if we leave any label open, our site will look bad and tend to break its decoration.

With this, we have a site with little CSS decoration, but completely responsive. We have managed to create a WordPress theme with bootstrap 4.

Advantages of creating a WordPress theme with bootstrap 4 and Underscores

We have the guarantee that all the coding in PHP is done correctly. Experts test all the functions we use.
We only include the CSS and js files that are strictly necessary. This will be useful for our theme to load as quickly as possible. It will not load unnecessary files, files that we do not use.
We will have some additional features, such as a responsive menu, an index, and a footer that will be adapted for mobiles.
Using underscores as the starting theme, we will have a logo that we can customize as well as some colors for the background of the site and for the texts.