June 3, 2015 1:46 pm

A comprehensive tutorial on building responsive WordPress theme using Bootstrap

The growing demand for responsive designs in the web design industry has given birth to numerous frameworks which have been effectively utilized for building websites and applications that can run on multiple devices with varying screen sizes and dimensions. Bootstrap is one such responsive framework which can act as a brilliant starting point for development of responsive WordPress theme.

A comprehensive tutorial on building responsive WordPress theme using Bootstrap

This is exactly what I’ll be looking into in this post. Here, you’ll get to know about the steps associated with creating a remarkable WordPress theme using the Bootstrap framework.

Knowing the tasks to be performed before creating the responsive WordPress theme

Here is a list of few things that you’ll need to do before creating a responsive WordPress theme using Bootstrap:

  1. You’ll have to install WordPress
  2. You’ll have to download and unzip Bootstrap
  3. You’ll have to install the Theme Test Drive plugin

Among the above three tasks, the third one is optional and applicable only in case you’re building a theme using your live site and don’t want people to view it while you’re still developing it.

Once you’re done with the above steps, follow the steps explained below:

Step 1- Open the WordPress files directory and go to wp-content->themes as shown in below screen-shot:

A comprehensive tutorial on building responsive WordPress theme using Bootstrap

Now, create a new folder named as: wp-bootstrap and within this folder paste the bootstrap folder as shown in below screen-shot:

Within the wp-bootstrap folder, create a new file called index.php as shown in below screen-shot:

A comprehensive tutorial on building responsive WordPress theme using Bootstrap 2

Step 2- As the second step, go ahead with copy pasting the source code from your live site into the index.php file(the one created in step 1). This marks the creation of a static HTML page.

Step 3- Create the main CSS page

Within the same folder as available for the index.php file, go ahead with creating a new file called style.css. Now, add the below comment code to the top of the style.css page:

/*

Theme Name: WP-Bootstrap

Description: A comprehensive tutorial on building responsive WordPress theme using bootstrap.

*/

Step 4- Upload an image for the WordPress theme

Now, go ahead with uploading the image that you want to appear with the theme within the WordPress admin dashboard. Ensure that this image is 300×225 px and assign a suitable name to it.

Step 5- Login to your WordPress admin area and go to Appearances-> Theme. Here, you’ll be able to view wp-bootstrap listed as one of the many themes. Now, click on “Activate” button available under wp-bootstrap theme for setting this as your site’s current theme.

Step 6- Convert Bootstrap files into WordPress templates

Start off with creating empty files for header.php, footer.php and sidebar.php. Now, cut all the HTML that would be included at the top of every page and paste it into header.php. Do the same for all HTML that would appear at the bottom of every page, followed by pasting it into footer.php file.

With the sidebar.php file still being empty, go ahead with using two WordPress tags viz: get_header() and get_footer() for including header and footer into index.php page.

The index.php file would now look like this:

Step 7- Add the wp_head() function for allowing plugin developers to be able to dynamically add the CSS or Javascript into your website. The header.php template would now look like this:

Step 8- Add wp_footer() tag before the closing body tag. The updated footer.php file would now look like this:

Step 9- Add JavaScript

In the same folder as for the header.php file, open the functions.php file and paste the following code inside it:

Step 10- Create the WordPress Homepage

For this, go to WordPress admin dashboard and click Pages-> Add New. Now, assign a suitable title to the page and click on HTML tab placed above the Content Editor. After this, cut the remaining markup from index.php file and paste the same into this homepage and click on “Publish”. The Homepage would look like this:

A comprehensive tutorial on building responsive WordPress theme using Bootstrap 3

Step 11- Use the WordPress function called the Loop for including the Homepage content which has been added in WP admin area back into the template dynamically. The basic loop looks like this:

The updated index.php file would now look like this:

Step 12- Add the code for pulling in title and content of homepage
Here’s the code that you need to use in this step:

Step 13- Add navigation and more content

Here, go ahead with adding new pages like About Us, Contact Us, News in the WordPress admin area. You can include dummy content for the time being and add your own content later on. Also, opt for replacing the site’s static navigation menu with the one that would display all pages which have been added via the admin panel.

Step 14- Create templates for posts and pages

Starting off with creation of a page template, take index.php file and save it as page.php file which will serve as the template of all pages which are being added into the WordPress website.

Code snippet associated with creation of page template is shown below:

For creating the sidebar template, simply go to the page.php file add the below code inside the get_sidebar() in the “span4” div as shown below:

Step 15- Adding the finishing touch to the WordPress theme

Use wp_title() tag for displaying the name of page or post in the title as well as in the name of the website. This is how you can customize the tag:

Additionally, you can display the name of the website using bloginfo( “name”). You can use them together with the title tag as shown below:

Simply add the above code to your header.php file in place of current title tag. You’ll be able to view all title tags towards the top of the page.

Step 16- Widgetize the sidebar

For widgetizing the sidebar, simply add the below code to your functions.php file:

Finally, go back to your sidebar.php file and replace the static content with a code so that it looks like this:

We’re done!

You can download complete code here:

Conclusion

With that we’ve finished the process of creating a fabulous WordPress theme that can be installed in your website right away. Now, you can avail the flexibility of customizing the theme with your own styles and content, to take your site to a brand new level of success.

Author Samuel Dawson

Samuel Dawson is an exuberant professional in Designs2HTML Ltd, a best HTML to WordPress conversion service company. Samuel is a Sr. Front End Developer here and shares plenty of his knowledge with others.


Tutorial Categories:
  • Samuel Ndhlovu

    when are you adding navigations for posts?