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.
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.
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.
0 Comments