A Handbook to Implement Bootstrap to Create A Smashing Theme for A WP Site

With more and more advanced mobile devices entering the market everyday, the way people use the Internet is certainly changing. This is the reason why responsive websites are in vogue today, as they can efficiently reach various devices without compromising on the quality. Although there are several other useful ways that augment web design for a variety of devices, responsive design approach makes a much sought after choice.

WordPress is the most popular CMS that enables one to create and manage his website with a flair. The platform is extremely flexible and intuitive that anyone from tech or non-tech background can operate this tool. Although there is no dearth of captivating themes in the WP repository, if you want to create a theme for your site on your own, you can reap the benefits of resourceful frameworks. There are numerous frameworks, including Twitter Bootstrap that help develop responsive web solutions.

Bootstrap makes it amazingly easy to develop responsive themes as it doesn’t require one to start from the scratch. All you need is to insert some HTML files that include basic styles and PHP code. However, it might be possible that novice developers could find the process a bit tedious.

This article will uncover the steps you need to accomplish in creating a responsive WP theme by implementing Bootstrap. Let’s explore the prerequisites and steps to help you.

Prerequisites to get started

Here is a list of things that you must have before beginning the process.

1- Install the latest version of the WordPress
2- Download Bootstrap, you can do it from the official Github page. Unzip the downloaded framework.
3- If you are working on a live website, also download the Theme Test Drive plugin and install it. By the virtue of this plugin, you can hide the new theme (while it is in the development stage) from the viewers of your existing website.

To develop a WP website, two essential files are style.css and index.php. However, to transform a theme into a Bootstrap theme, some additional files will be needed. You will  get these requisite files after downloading the Bootstrap framework.

Step 1: Adding The Bootstrap Folder Into Theme Structure

First, create a new theme folder and name it as the theme name that you want to use. Here, I am using myfirstbootstraptheme; this will be the name of my theme.

wp-content > themes > myfirstbootstraptheme

The unzipped Bootstrap folder will include three sub-folders, namely: images, js and css. Copy and paste these images, css and js folders in your WordPress theme folder. Here it is myfirstbootstraptheme. Now, your myfirstbootstraptheme folder includes three files.

Create three new files in the same folder, and name them as functions.php, index.php, and style.css respectively.

Step 2: Configuring Bootstrap Theme

Now, add the below mentioned comment and a line of code to the top of the style.css file of the theme.

/*
Theme Name: My First Bootstrap Theme
Description: A demo theme How to Implement Bootstrap To Create A Smashing Theme For A WP Site.
Author: D2H
Version: 1.0
Tags: responsive-layout, pink,  bootstrap, post-formats

This demo theme was built to describe a simple way to create a responsive WP theme by using the Bootstrap framework*/

@import url(“style/bootstrap.min.css)

By adding this comment, you can tell the WordPress that your theme name is “My First Bootstrap Theme” with version 1.0. The comment section also provides additional information (like author, description and so forth) of the theme.
Furthermore, the line of code after the comment section plays a vital role in creating a link to the Bootstrap files from the style.css file of WP.

 Step 3: Creating And Amending The functions.php File

Once you are done with adding the requisite Bootstrap files with the style.css file of the theme, you can add the suitable PHP functions to define the look and feel of every page of your theme. I will add two essential functions in the functions.php file.

One function will facilitate the integration of Bootstrap stylesheet and another function will help load the JavaScript. The wp_enqueue_script() function augments the loading of JavaScript.

Code Snippet of wpbootstrap_my_scripts():

<?php
function wpbootstrap_my_scripts(){
wp_enqueue_script(‘jquery’);
wp_enqueue_script( ‘bootstrap-js’, ‘script/bootstrap.min.js’); // all the Bootstrap javascript
}
add_action(‘wp_enqueue_scripts’, ‘wpbootstrap_my_scripts’);

In the above code:

The wpbootstrap_my_scripts() functions facilitates enqueueing of the jQuery library, and the Bootstrap JS file in the WP theme.

The add_action hook, which automatically replaces the default wp_enqueue_scripts() function with the new wpbootstrap_my_scripts() function. Now, every call to the wp_enqueue_scripts() of the theme will be redirected to the just created wpbootstrap_my_scripts() function.

Code Snippet of wpbootstrap_my_styles():

function wpbootstrap_my_styles(){
wp_enqueue_style( ‘bootstrap-style’, get_template_directory_uri() . ‘/style/bootstrap.min.css’);
wp_enqueue_style( ‘my-bootstrap-style’, get_template_directory_uri() . ‘/style.css’);
}
add_action(‘wp_enqueue_scripts’, ‘wpbootstrap_my_styles’);
?>

The wpbootstrap_my_scripts() function works in the same fashion as the wpbootstrap_my_styles() function. The only difference is that this function includes stylesheets rather than JavaScript.

Wrapping both wpbootstrap_my_styles() and wpbootstrap_my_scripts() together in PHP tags.

<?php
function wpbootstrap_my_scripts(){
wp_enqueue_script(‘jquery’);
wp_enqueue_script( ‘bootstrap-js’, ‘script/bootstrap.min.js’); // all the Bootstrap javascript
}
add_action(‘wp_enqueue_scripts’, ‘wpbootstrap_my_scripts’);
function wpbootstrap_my_styles(){
wp_enqueue_style( ‘bootstrap-style’, get_template_directory_uri() . ‘/style/bootstrap.min.css’);
wp_enqueue_style( ‘my-bootstrap-style’, get_template_directory_uri() . ‘/style.css’);
}
add_action(‘wp_enqueue_scripts’, ‘wpbootstrap_my_styles’);
?>

With this, you will have a Bootstrap-powered WP theme. You can customize the theme to efficiently cater to your needs by using the suitable styles.

Final Thought

For the folks who want to develop a responsive theme for WordPress that features a unique and fresh visual appeal with rich jQuery effects, relying on a framework like Bootstrap makes a viable choice. I hope this tutorial will help you get started with the Bootstrap framework and develop a stunning WP theme that can make your website appear exquisite on any device.

Samuel Dawson is a effective professional working as Senior Front End Developer in Designs2HTML Ltd – a PSD to WordPress conversion service firm having long years of expertise. Samuel loves to see knowledge based movies where he can gain something.