A Complete guideline on creating WordPress themes with Bootstrap

Jul 24, 2014Blog, Guest posts, Web design, WordPress

With WordPress ruling the world of Content Management Systems(CMSs), more and more people are switching towards building their websites using this web platform. Specifically talking about web frameworks, Bootstrap is an excellent responsive framework that is utilized for building websites and web applications which are 100% responsive in nature. In addition to this, it is also successfully used for creating high-end WordPress themes. If you’re comfortable in tweaking certain assets of a WordPress admin area, then you’d definitely enjoy building a responsive WordPress theme using the very simple Bootstrap framework. Keep on reading this blog to learn more about this.

A Complete guideline on creating WordPress themes with Bootstrap?

Step 1- Get a custom boilerplate theme that combines the power of Compass, Bootstrap and Grunt

First of all, you need to download a custom boilerplate theme that will allow you to get started with building the WordPress theme. This custom theme would use the Compass library, offering you an easy access to several helper functions and mixins. In addition, there’s also Grunt which will run tasks in the background. Once you’re done with the installation of this theme, you’ll be required to enable the same as your WordPress website’s current theme in order to view it during the development process.

Get a custom boilerplate theme that combines the power of Compass, Bootstrap and Grunt

Step 2- Setting up the theme
Prior to proceeding ahead with the theme set-up, it is essential for you to install some dependencies. I’ve bundled the same into a bash script which can be run as explained below:

$ cd /path/to/disco-ninja/wp-content/themes/yourname-wordpress-bootstrap
$ [sudo] bash init.sh

The above mentioned script will further fetch the latest version of Sass Bootstrap and all the Grunt packages that are required for automating the tasks.

Step 3-Keep a watch over the code
Once you’re done with the installation part, simply go ahead with watching your code by including this declaration:

$ grunt watch

By including the above code, Grunt will watch all your .scss files and generate WordPress-friendly style.css. Moreover, Grunt will also watch js/custom.js for every custom JavaScript file, compress it with the Bootstrap scripts and check whether the code is legit with jshint or not.

Step 4- Initiating the process of building WordPress theme
By default, the custom theme only has the Bootstrap style components which are in use by it. If you’re inclined on including any other components, you’ll need to comment them in scss/style.scss using the Compass library. Now, coming to the JavaScript part, the custom script in js/custom.js is being bundled and compressed along with the Bootstrap scripts. Here, you’ll be able to choose the Bootstrap scripts you wish to include in the Gruntfile.js already available in the concat.bootstrap.src object.

Step 5- Switching from development to production
For changing the theme development mode to production mode, all you need to do is simply change the environment value in the package.json file from “development” to “production”, followed by restarting the grunt watch command. Once you’ve done the alteration, the style.css file will be compressed by Compass, thereby leading to a significant cut-down in the file size.

Step 6- Don’t forget to update the developed theme
Once you’re done with the creation of WordPress theme, don’t forget to run the update.sh script. Since Bootstrap constantly undergoes updations and improvement, this is something you can’t afford to skip. Here’s how you need to run the update.sh script:

$ cd /path/to/disco-ninja/wp-content/themes/yourname-wordpress-bootstrap
$ [sudo] bash update.sh

Wrapping Up
So these were the steps involved in the creation of fully-responsive WordPress theme using Bootstrap framework. Here, you can simply begin customizing the theme with your own content and styles. You may choose to add any of your custom CSS to the style.css file available in the theme folder. Hope you’d have followed the steps and enjoyed reading the post. If you’ve any queries or want to share your feedback/suggestions regarding the post, please proceed ahead by using the comments box below.

Maria Mincey

Maria Mincey is a web development professional who works for the WordPrax - PSD to WP Theme services provider. Maria also happens to be a blogger with a strong passion for all things Wordpress.

Related Posts

25+ Free Fonts for Your Next Design Project

25+ Free Fonts for Your Next Design Project

Looking for some fresh and creative fonts to spice up your design projects in 2023? You’re in luck! In this blog post, we’ve curated a list of 25 free fonts that you can download and use right away. These fonts are suitable for various purposes such as logos,...

Adobe Photoshop Shortcuts – Infographic

Adobe Photoshop Shortcuts – Infographic

Thanks to Amanda from the Consumer Base that she sent us an ultimate Adobe Photoshop shortcuts cheat sheet. If you are a beginner or want to brush up your knowledge on Adobe Photoshop shortcuts then you are at the right place. Have look at it and let us your thoughts...

20 WordPress Tutorial channels on Youtube

20 WordPress Tutorial channels on Youtube

This post will introduce you a useful list of the 20+ best currently active WordPress tutorial related channels on Youtube. These channels are mostly focused on Tutorials and Guides for Developers and Designers that want to learn all about WordPress. Check them out...

12 AI Tools for Graphic and Website Designers

12 AI Tools for Graphic and Website Designers

Artificial intelligence (AI) is transforming the way designers work, from ideation to execution. AI tools can help designers automate tedious tasks, generate new content, and enhance their creativity. In this blog post, I will introduce AI tools that you can use to...

How to Pair Fonts – Tips and Tools for Perfect Font Combinations

How to Pair Fonts – Tips and Tools for Perfect Font Combinations

Font pairing is the art of choosing two or more fonts that work well together and create a harmonious design. Font pairing can make or break your website, logo, poster, or any other project that involves typography. But how do you pair fonts like a pro? In this...

The Ultimate Guide to Color Palettes

The Ultimate Guide to Color Palettes

Color palettes are collections of colors that work well together and create a harmonious visual effect. They are essential for any design and art project, as they help to convey the mood, message, and style of your work. But how do you choose the right color palette...

Show/Hide Comments (0 comments)
L

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social followers

Articles

Visits

Pin It on Pinterest

Shares