WordPress Genesis Child Theme setup to use Bootstrap 3, Sass, and Grunt.
The CSS is Missing
I hear from a lot of users, "Hey, I tried to use your theme but there is no CSS."
Download the latest Bootstrap Genesis release and use that.
The Long Version
This is the base theme I use for the projects I build. Part of my workflow includes using
Because the resulting
check them into version control (i.e. they are listed in the
If you're running GruntJS and have Sass
installed you can run
npm install and
grunt from the command line and the
you can use the latest
Bootstrap Genesis release,
Why no CSS in style.css?
Since I'm treating the CSS as a compiled asset that I do not want to include it
in version control, I use
style.css only for the theme header information and
all applied CSS is stored in
The menu is modified to use Bootstrap markup and the menus are placed at the top of the page by default. All menu modifications are removed, when the Ubermenu plugin is present
This theme was created as my own starting point when building custom Genesis child themes using the Bootstrap front-end framework.
The goal is to leverage Bootstrap as much as possible by adding the appropriate markup to trigger Bootstrap styling.
Whenever there is a choice between making an adjustment via the markup or via Sass/CSS, markup modifications are preferrable. There are two justifications for this:
- We want to keep the CSS as small as possible for load time
- By using Bootstrap Markup we make the Bootstrap integration more transparent and easier understand and manipulate.
How to Update Bootstrap
Here are my notes on updating Bootstrap in this project.
After updating the Bootstrap files, the Grunt task must be run to update
which are used to create these two minified files.
- Download the latest Sass version of Bootstrap
- Replace the fonts. Move all files in the new download from
- Replace the top level Sass file. Move the new
- Replace the Bootstrap partial and mixin files. Mall all files in the new download from