How to build WordPress themes with Bootstrap

Tags: , , &

build-with-bootstrap-by-zing-design

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:

DownloadGitHub

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.

Enable the Zing Design WordPress Bootstrap as the current theme

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.

Theme set-up

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

Grunt will watch all of the .scss files, and generate the WordPress-friendly style.css, it will watch js/custom.js for any custom JavaScript, compress it in with the Bootstrap scripts and check your code is legit with jshint.

Start building themes

CSS

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.

JavaScript

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

People who have viewed this post also viewed

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text