3 Main Approaches to Creating a Bootstrap Theme for WordPress

Reading Time: 4 minutes
Bootstrap Theme

A Bootstrap is a popular HTML, CSS, and JS framework used to develop adaptive, mobile-first web projects. It has widely been used with WordPress because they both pride on adaptiveness and easy loading, which is crucial for web-to-mobile compatibility. With the help of Bootstrap, which is gradually winning over developers, a customized website acquires a mobile-friendly version. Read on to learn how to create a Bootstrap theme for WordPress.

Creating a Bootstrap WordPress Theme

Depending on your PHP and coding skills, you may try and develop a responsive BS theme for WordPress yourself, or you may opt for using a Bootstrap for WordPress theme builder or customize an existing Bootstrap Starter WP theme. Below we will briefly go over each option.

Creating a Bootstrap Theme Yourself

To try your hand at building a BS theme yourself, first download the Bootstrap .zip file from their official site and then follow the steps below

Create a theme folder

In wp-content/themes, create a “bootstrapstarter” folder but leave it empty. This is going to be the main theme folder.

Extract Bootstrap

After you download the latest BS version and open the .zip folder, you will see that all files are allocated to three folders: css, js, and fonts.

Note: you can either extract them to the “bootstrapstarter” folder OR create a subfolder and extract the files into that.

Create required files

Each theme in WordPress has the following basic files, which you now need to replicate:

  • css
  • php
  • php
  • php
  • php
  • php.

In later steps you will be modifying each file.

Edit style.css

This file always begins to a comment header that allows WordPress to identify the theme and display it in Appearance > Themes in the Admin Panel, along with other installed themes.

Attention: the lines can be amended according to the information you want to include in your theme.

Edit functions.php

This file is essential for a correct loading of a WordPress theme during the initialization. With its help, you can include different stylesheets without overloading the <head> block. The file also supports various features, like Sidebars, Menus, and different custom options and functions.

Edit page structure

Each WordPress page consists of the following 4 blocks:

  • php;
  • php;
  • php;
  • php.

After you allocated all page elements to the corresponding blocks, now is the time to edit each file and integrate it with WordPress.

Edit header.php

When you just begin editing this file, it will contain the static HTML content from the Bootstrap file. You will need to remove:

  • references to any CSS files;
  • all meta tags and favicons;
  • all title tags.

Instead, use:

  • the language_attributes() to display the language attributes for the <html> tag.
  • the bloginfo(‘charset’) to display the encoding for pages and feeds;
  • the wp_head() just before the closing </head> tag;
  • the body_class() to provide the body element with different classes based on a generated page.

Edit functions.php

Although <title> tag has been removed from the header.php file, this simply means that WP plugins and themes can now manage the title tag via add_theme_support() (for WP 4.1 and above).

Note: adding this code to functions.php enables WordPress to generate the title tag for you.

Edit footer.php

Similarly to header.php, you remove all JS references and use the wp_footer() function just before </body> tag to initialise the ‘wp_footer’ action.

Edit index.php

After all preceding files have been modified, you can now work on the main file. Index.php is responsible for displaying all posts in the default chronological order. Instead of the static HTML for the post block you can use the following functions:

  • the_title()
  • the_date()
  • the_author()
  • the_content()

The static content in the index.php file will be replaced with the loop that uses the above standard functions.

To make sure both header and footer are shown on the page, use the get_header() and get_footer() functions at the top and bottom of the page.

Edit style.css

Now you can copy all rules from the starter template blog.css file into your own theme style.css file. Add the CSS code after the comment header for your style.css file.

Use a Bootstrap for WordPress Theme Builder

Many independent developers and web-developing companies have created easy-to-use theme builders thandeploy Bootstrap framework to create WordPress themes.

Fact: unleash your creativity and make any BS-based WP theme by using drag-and-drop functionality. In this case you do not have to do any coding yourself.

Use a Bootstrap Starter Theme for WordPress

Finally, if you are a blogger and you just want a sleek Bootstrap theme for your WordPress blog, browse the existing Starter themes. And if you want to customize them, you can do it yourself or seek help of a professional Bootstrap developer.

Note: the most popular themes are UnderStrap, WP Bootstrap Starter, and Bootstrap Basic. They have all been downloaded over 3000 times and received excellent ratings.

Final Conclusion

Bootstrap is a great solution for responsive WordPress sites and blogs. As people increasingly access your content from their mobile phones, you naturally want the site to load quickly and correctly and be responsive and functional. Bootstrap provides the required framework while bringing the coding to the minimum. It saves tons of time and makes website work and look better on mobile phones.