This is a Guest Post by Ashish

50% of online searches take place on a mobile device. Search engines favor responsive websites over non-responsive websites. 83% of the top most search result is mobile friendly. Responsive web designs provide a richer user experience in comparison to non-responsive websites.

WordPress Theme

Why are we telling you these facts? With the world moving to the mobile platform, it has become the need of the hour to make websites responsive not only to rank better in mobile search results, but also to offer a better user experience irrespective of the device on which the website is viewed.

What is Bootstrap?

Bootstrap is one of the most popular HTML, CSS, and JS framework for developing responsive websites. It makes front-end web development simple, faster and really effective. You don’t need a lot of technical expertise or advanced skills to work with Bootstrap. The best thing about Bootstrap is that it scales websites and apps to different devices with a single code base. Millions of websites have been made responsive and compatible with different devices by using the unmatched potential of Bootstrap.

How to Build a WordPress Responsive Theme Using Bootstrap

Using bootstrap with WordPress doesn’t require a lot of skills. You need to have an understanding of WordPress with basic coding skills to develop a responsive theme. The following steps are required to build a responsive WordPress theme using Bootstrap.

Pre-Requisites:

Before you can begin building a responsive WordPress theme with bootstrap, you need to ensure that the following pre-requisites are in place.

  • Install WordPress
  • Download and unzip bootstrap files
  • Install Theme Test Drive Plugin (this plugin displays a “coming soon” or “website under construction” page until the website is made live. You should consider using this plugin only if you do not wish the users to see the website during its development phase.)

Step 1: Access the Bootstrap Folder

You need to access the folder containing bootstrap. Ideally, you should have downloaded and unzipped the files and placed them in a folder. If this is not done, then please do this before proceeding.

You need to access the directory containing the WordPress files. For this you need to:

  • Go to wp-content
  • Create a new folder and rename it as “wpbootstrap”. You can give it any name you want but for the purpose of explaining the steps, we will use the name “wpbootstrap”
  • Copy and paste the contents of the bootstrap folder into the folder you have just created
  • Inside the recently created wpbootstrap folder, create a file called index.php

Step 2: Create a Static Page (HTML)

The HTML static page can be created by copying the source code from the website that you have selected. Now paste the copied files to the index.php file located in the wpbootstrap folder.

Step 3: Create The Primary CSS Page

Access the index.php file and create a new file with the name “style.css”. The file should be maintained at the same level as the index.php file. Please do not rename the file anything other than “style.css” because WordPress needs this file to build the theme and will not work with any other file name.

With that taken care of, add the following comments to the top section of the style.css file to allow WordPress to access the theme’s meta information.

Step 4: Upload An Image for the WordPress Admin Section

You need to upload an image for the WordPress admin section. The image should be exactly 300 x 225 px. Rename the image to “screenshot.png”. Please do not rename the file anything other than “screenshot.png” because this is a mandatory requirement of WordPress.

The file structure should be like this

WordPress Admin Section

Step 5: WordPress Theme Activation

The theme has to be activated or initialized before further changes can be made. This can be done by using the following steps.

  • Access the Admin section of the WordPress dashboard
  • Access the “theme” option under “Appearance” tab.
  • If you have configured the access correctly, you should be able to see a new theme called wpbootstrap.
  • Select this theme and activate it.

Check the screenshot below for a better understanding

WordPress Theme

As soon as the theme is activated, your WordPress website should look similar to the following

WordPress Website

Step 6: Static File to Functional WordPress Theme Conversion

For this step, you need to create three files – header.php, sidebar.php and footer.php. Now copy all the HTML codes present at the top section of the pages into the header.php file that you have created.

The structure should look like this

Now copy all the HTML codes from the bottom section of the pages into the footer.php file. It should look like this.

Step 7: Add Header and Footer Files to Index.php File

For adding the header and footer files to the index.php file, you need to use the get_header() and get_footer() tags. Do not modify these tags because they are default in-built functions of WordPress. The tags are useful in locating the header and footer files respectively and adding them to the page.

This is great for saving time because the header and footer can be added to all new pages by simply providing the tags. Similarly, if any change has to be made in the header or footer, then the changes have to be made in the primary header and footer file and the same will be reflected across all pages where they have been added.

Step 8: Fix All Broken Links to the JavaScript and CSS Files

To begin fixing broken links to the JavaScript and CSS files, you need to make changes to the header code first. It should be like the code below.

Now that this is done, you need to add elements to the style.css file as required. In the code, we have used the bloginfo() function that links to the theme’s bootstrap CSS files. We have also made use of the @import tag which helps in linking to the css files of bootstrap to the primary css file (style.css).

If you have followed the steps correctly, your site should appear like this

Fix the link to CSS and JS

Step 9: Adding CSS / JavaScript to the Website

You can add CSS or JavaScript to the website by using the Wp_head() function. The addition of this function ensures that all plugins that we install in the website work perfectly.

The header template needs to look like this.

Step 10: Fix Footer Issues

You might have links to JavaScript files that might not be of any use on the website. You need to remove those links. After removal, the footer.php file should have the following code.

Step 11: Adding the Footer Tag

You have to add the Wp_footer() tag just before the closing body tag. If implemented correctly, it should look like this. 

Step 12: Load the JavaScript File

Use the wp_enqueue_script() function to load the jQuery near the wp_head() function.

Now add the following code to the header.php file

After that, create a file called functions.php

If implemented correctly, the drop down menu should look like this

Load the file

Step 13: Create a Homepage on WordPress

In order to create a homepage on WordPress, you need to perform the following steps.

  • Access the admin section on your WordPress dashboard
  • Click on “Pages” in the side menu bar and select “add new”
  • The page should have the title “Home”
  • Click on the HTML Tag (this should be placed above the content editor)
  • Copy and remove the remaining markup code from index.php
  • Paste the markup code in the home page
  • Publish the page so that the changes are updated on the site.

If all the steps have been performed correctly, the homepage editor view should look like this

Create a Homepage

Now the only things remaining in the index.php file should be the header and footer codes.

Step 14: Adding the Loop Function

Now that the base structure is ready, you have to add the content in the admin section in the template. The reason for adding a loop function here is that it allows looping through posts or pages and extract information like title, publishing date, comments and author. The loop function is also useful in extracting content from the post or page.

The following code provides the loop function on WordPress.

At this stage, you need to add the_title() and the_content() functions to the code in order to extract the page title and content.

In order to display a static page on the homepage instead of blog posts, you need to perform the following steps.

  • Go to the Settings option in the admin section of the WordPress dashboard and access “reading”.
  • Under ‘front page displays’ select ‘static page’ instead of ‘blog posts’.
  • Select ‘home’ option from the homepage.

This will ensure that the static page is displayed on the homepage and all blog posts can be placed appropriately on a different page.

Step 15: Add Content and Setup Navigation

Now that the base of the website is set up, you can add more content and pages. Simply access the admin section on the dashboard and create more pages such as About Us, Contact Us, etc. Adding content is really easy in WordPress and you can manage it without any problems.

For setting up proper navigation, find the unordered list with the class ‘nav’ and delete all the items mentioned in the list. Now add the static navigation menu containing the pages that you have created. This needs to be updated every time you add or remove a page.

Step 16: Adding Widgets

Widgets are placed on the sidebar which makes using them really convenient.

In order to add widgets, add the following code in the function.php file.

Your Responsive WordPress Theme With Bootstrap is Ready

If you have followed all steps correctly, your WordPress theme development with bootstrap should be complete. As you must have experienced, using bootstrap with WordPress is easy and doesn’t require a lot of technical skills. You can test your website on different devices to check if the theme is fully responsive and meets your expectations. You can continue adding more pages and enhancing the website as required.

That’s it! You have successfully created a Responsive WordPress Theme with a Bootstrap

If you have any queries then feel free to ask it in the comment section below

If you liked this article and want a similar article directly in your inbox then you can subscribe to our newsletter (Click here to subscribe) OR you can also like us on Facebook

This Guest Post is Submitted By: Ashish

As a Senior Marketing Manager at Systematix Infotech, Ashish (Facebook) directs media relations, branding, advertising and website development. With the completion of several marketing projects for different companies, he also holds a firm experience in designing effective digital marketing strategy for the company. He is a web development and business development expert with the experience of 7+ years.

Site: www.systematixinfotech.com | Click here to write a Guest Post for us


Related Articles: