How to Use Bootstrap with WordPress to build your Theme?

7 min readJun 26, 2021

Both WordPress and Bootstrap are created to cover vast and lengthy under-the-hood technical stuff below a straightforward and easy-to-use interface or framework, so it is the reason why they look like a natural pair. They are made for integration, but Bootstrap is not as easy as installing WordPress setup, themes, and plugins.

You already have a great understanding of building your website from scratch like a professional. Still, if you’re thinking about creating your WordPress theme, you have to go with Bootstrap, an excellent framework for building themes.

First of all, you need a WordPress Hosting Account to use Bootstrap (a design framework) and WordPress (Popular CMS) to create your WordPress theme.

How to Include Bootstrap?

Let’s start with the basic steps to include Bootstrap in a couple of different ways. Either you can download the source file or include a CDN (Content Delivery Network) in your project. If you want to use the CND option, then you have to include the following link in the head section of your page(s):

This option is more suitable because you don’t need to store bootstrap files with your project. After all, CDN is a server where all files are stored, and you need to reference them correctly. It will also save your precious time because you don’t need to download and upload the bootstrap files, so using this option is a significant advantage.

How to build your own WordPress Theme?

Creating a more functional WordPress theme can be a complicated project, so I will explain how to make a simple WordPress theme. However, you can add more functions to it, but these steps are standard.

You can consider a theme as an overlay because the underlying structure or operations remains the same regardless of the Theme used. And be clear about one thing: Theme is just the style and Appearance of the WordPress core that makes it stylish, different, and unique.

How to create a WordPress Theme From Scratch?

1. Create Theme Folder

First of all, go to the wp-content/themes folder, create a new folder named MyTheme and give the directory name in lower case, mytheme. Either you can use cPanel or install the FileZilla FTP program for performing this action.

2. Complete WordPress Theme Building Blocks

Now, create the following files to simplify the process; you can copy the files from the default WordPress theme:

3. Download Bootstrap

Download the latest Bootstrap version from their official website and extract it into the theme (mytheme) folder. You will see a folder named “bootstrap” and two sub-folders called CSS and js. If you extract it outside, copy the main folder named Bootstrap and paste it into the theme folder.

4. Edit Style.css

The choice is yours; either you can edit these files offline in your laptop code editor or use the cPanel’s default editor and add a comment header first. This comment enables WordPress to identify the Theme and display it in the Theme administration panel under Appearance and contains the information related to your Theme, such as Theme Name, Theme URI, Author, Description, Version, and text-domain, etc.

Let me explain the things you are viewing for the first time; Theme URI means a URL of a public web page where we can find more information about the Theme. Autor URI is used to present the authoring individual or organization.

5. Edit functions.php

It is an optional file, but you will see it in each WordPress theme. If the file is present and the Theme is active, it will be automatically loaded during the WordPress initialization phase for the domain area and external website. It can be used for many tasks, including:

Include any CSS, JavaScript files, and other scripts. It is recommended to include stylesheet(s) in a theme instead of adding them to the theme HTML <head> tag.
It is used to enable and declare theme support for features such as Sidebars, Navigation Menus, Post Formats, Post Thumbnails, Custom Headers or Backgrounds, and others.
You can use it to include those functions you want to use throughout your Theme.
This file can also set up different options for theme customization, and it is available under Appearance> Customize.

This given block of code includes the Bootstrap CSS and JavaScript files, including styple.css, which is a default styling sheet. So, we can do it using a function named “wp_enqueue_scripts” that will include all these files that are meant to appear on the client-side (frontend).

I have created two functions for including CSS and JavaScript files in the next block, but you can also include both files in a single function. The choice is ultimately yours.

The function bootstrapstarter_enqueue_styles() is used to register Bootstrap CSS using wp_register_style() so that we can use it with wp_enqueue_style(). Please keep in mind, don’t call Bootstrap CSS directly because we need to create a dependency between our style.css and bootstrap CSS. So, it means the bootstrap CSS will be loaded before our style sheet.

We need to pass an array of all dependencies, but in our case, we have only Bootstrap, so our $dependencies array only handles the Bootstrap. (Which we have registered earlier)

bootstrapstarter_enqueue_scripts() is used to define an array in which query will be included. WordPress comes with pre-installed scripts, including jquery, but we will explain it because it is a dependency for our Bootstrap JS file.

6. Page Structure

Look at this page; you will realize that this page has been divided into different sections, as you can view in the screenshot:

If you want to create the same page for your hands-on practice, copy each section’s source code separately and save it in the relevant section. For example, please copy the code of the footer and paste it into the footer.php file, header including site title and navigation into header.php, body into index.php, sidebar into sidebar.php. Here is the content of all the sections:

Header.php

Footer.php

7. Edit Header.php

You have just finished the copy and pasting from the reference template; now, we have to make the following changes:

Remove all references to any external CSS files because we are using ours included style sheet.
We also don’t need meta tags because we will use Yoast or SEOPress for author and description and favicon (Favicon can be added using WordPress core functions).
There is no need to use <title> here because WordPress will manage the titles.
For displaying language attributes, we need to include the language_attributes() function.
To display encoding for pages and feeds set in WordPress Settings > Reading, we need to add the bloginfor(‘charset’) function.
Now, add the wp_head() function before the closing head tag (</head>) because it is compulsory for the core functionality and performance of many plugins.
Finally, it would help if you used the body_class() function that will load the body content and elements based on the page that is begin generated.

After deleting the things, I have told you, the header.php file looks like:

8. Edit again functions.php

As you know, we have removed the title tag from the header and it is one of the primary and required element so edit the functions.php file. If you will use the WordPress 4.1 or above then you will add the “add_theme_support” function otherwise you have to use wp_title() function.

9. Edit Footer.php

Now, perform the same action as you did before in header.php — remove all the references of javascript files and add the wp_footer() function before the closing tag of body “</body>”. Your footer will be looks like:

10. Edit index.php

Finally, you have to edit the index to show recent posts in chronological order. The index contains the static content, so we have to replace this with index.php using a loop. It will display the title, content, author name, publishing date, etc. Index.php file will look like:

Let me explain a bit more, we will use the following functions instead of a static content:

As the name indicates, the next and previous post links are displayed using the following functions:

next_posts_link()
previous_posts_link()

In the end, make sure you have placed the header at the top and footer at the bottom of your page using the given functions:

11. Edit style.css again

Now, you have to copy all the styles from the template style sheet blog.css that we have removed into the style.css file. You have to make sure that you are adding the CSS code right after the comment header for your style.css file.

Final Words

Finally, you have done all the basic steps that are the bare bones of the WordPress theme with the help of a blog template available on the official Bootstrap website. Now, login to your WordPress dashboard and navigate to the Appearance> Themes, and you will see the Theme as given below:

But you will see there is no preview image, so you can create an image of a 1200 x 900 px PNG file and upload it into the theme directory. After creating a preview image, name it as “screenshot.png” and save it in the mytheme (or your theme directory folder) and now you will check it is showing the feature image: