JOIN OVER 31,000HAPPY CUSTOMERS AND GET ACCESS TO OUR FULL COLLECTION OF SENSATIONAL THEMES - 31 FOR THE PRICE OF ONE!

A comprehensive tutorial on creating WordPress theme using Bootstrap

A perfectly designed theme has the caliber of adding a unique tint of elegance and professionalism even into the very plain, boring WordPress website/blog. Among the huge crowd of frond-end frameworks which have been effectively utilized for creating WordPress themes from scratch, Bootstrap has emerged as one of the most effective one. While the basic idea of building a WordPress theme from scratch might seem to be quite scary for a majority of WordPress developers, in reality, it isn’t. All you’re supposed to do is simply play with a few html files along with basic WP php code and certain styles. In this post, I’ll be walking you through a simple technique of creating a fantastic WordPress theme using the Bootstrap framework. Trust me, there’s nothing overly complicated and hence you need not worry.

Step 1- Download Bootstrap from official GitHub page

Apart from the usual style.css and index.php files, you’ll need some more Bootstrap files for creating a WordPress theme using Bootstrap. For this, I recommend downloading Bootstrap from GitHub. While during the development stage, we’ll be using all the js and css coding, while finishing the theme, it will be essential to remove/slim down any unused code. This will be done for speeding up the resultant WordPress theme.

Step 2- Prepare the Theme Folder

After having downloaded Bootstrap, you should open the Bootstrap zip where you’ll find individual folders for js, css and img. Copy all these folders into a theme folder i.e. any empty folder, preferable with a name that includes a specific number.

Step 3- Create the three files that are vital for accurate functioning of the WordPress theme

After having copied all the folders, it’s time to create three more files that would mark the appropriate functioning of the WordPress theme. These files include: index.php, functions.php and style.css. Add these three files into theme folder(the one created in step 2) along with other Bootstrap files/folders.

Step 4- Set up your WordPress theme

As the very first step here, you need to add the comment block to top of the style.css file.

Below is the code which informs WordPress that the files in the folder create a theme called My Bootstrap Theme with version 0.1. Plus, it also tells that the author has imported bootstrap.min.css file which includes responsive stylesheet.

/*

Theme Name: Bootstrap Theme

*/

@import url(“css/bootstrap.min.css”);

Tweaking WordPress Index.php file

With a very basic markup, the index.php file will display the title of your WordPress website. Now, you just need to paste the below code into the index.php file:

With that you’re done with creating a Bootstrap powered WordPress theme. You can opt for adding some Bootstrap markup to make the WordPress theme look like a proper web page.

Conclusion

Here’s hoping the above post would have allowed you to dip deep into the concept of building a remarkable WordPress theme using Bootstrap. So, the next time you’re planning to create a new WP theme, don’t refrain from choosing the simple-to-use Bootstrap framework.

Author Biography:

Samuel Dawson has vital skills to develop instant results in developing any web development application. He is a comprehensive player in converting PSD to WordPress in very less time. Samuel is quality expert of various web design & development projects.

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.

MARKET FOR CREATIVES

OPTIN MONSTER NEWSLETTER

Our Sponsors

Popular posts

OUR NEWSLETTER

Subscribe to our newsletter to receive news, updates, freebies and new WordPress Themes releases by email. We never spam.

Enter your email address...

Premiumcoding offers premium WordPress themes for corporate and personal use. From clean and minimal, to complex and multi-functional, every one of our themes is professional, responsive and beautiful.