When building WordPress themes with Bootstrap, the process has not always been very smooth. We thought we’d make it easier and so we’ve created a custom boilerplate theme for developers looking to build responsive themes from the ground up using the combined power of Bootstrap, Compass and Grunt.
Get the theme or contribute on Github:
Check out our article on how to get started developing themes for WordPress.
Our custom theme
This theme is a simple boilerplate theme to help developers quickly get started building WordPress themes with Bootstrap. It uses the Compass library for helper functions and mixins, and Grunt to run tasks in the background. Once installed, you’ll need to enable it as the current theme in WordPress to view it while developing.
The theme is heavily based on WordPress’ twentyfourteen theme, it includes some of the style rules from twentyfourteen and a few basic Bootstrap styles to begin with, but all-in-all I’ve tried to keep it as blank a state as possible.
Before you get started, you’ll need to install some dependencies, I’ve bundled them into a bash script which you can run like so:
$ cd /path/to/disco-ninja/wp-content/themes/zingdesign-wordpress-bootstrap $ [sudo] bash init.sh
Note: You’ll need to have Ruby installed to use Compass. For more help on this, read our article on getting started with Compass.
This script will go and fetch the latest version of Sass Bootstrap, and all the Grunt packages required to automate the tasks involved.
Watch those files
Once everything has installed, you can go ahead and start watching your code with:
$ grunt watch
Start building themes
By default, only the Bootstrap style components in use by the theme have been included in the stylesheet. To include any other necessary components, uncomment them in scss/style.scss. The Compass library is included by default.
The custom script in js/custom.js is bundled together and compressed with the Bootstrap scripts. Choose which Bootstrap scripts you wish to include in Gruntfile.js, in the concat.bootstrap.src object.
Moving from development to production
To change into production mode, simply change the environment value in the package.json file from “development” to “production”, then restart the grunt watch command. In production mode, the style.css will be compressed by Compass, cutting down the file-size significantly.
Updating the theme
Bootstrap is constantly being updated and improved, to keep the theme up to date with the latest release, simply run the update.sh script:
$ cd /path/to/disco-ninja/wp-content/themes/zingdesign-wordpress-bootstrap $ [sudo] bash update.sh