Heisenberg - Zeek Starter Theme
This is the Zeek Starter theme, based on Underscores and Foundation 5.5.1.
How to get started
- Install Node.js
- Install Sass
- Install Bower - from Terminal or Command Prompt run
npm install --g bower
- Install Gulp.js - from Terminal or Command Prompt run
npm install --global gulp
Note: if you run into errors when using Terminal, you may have to use the sudo command to install Bower or Gulp.js. For instance,
sudo npm install -g bower
Install Foundation using Bower. We use Bower as our front end package manager. To get started, run
bower install and all of the packages will be brought into the
./assets/components directory. We overwrote the default
bower_components directory in
.bowerrc; all Bower files are sent to
The theme dependencies are listed in our
package.json file. If you run
npm install, all of the plugin dependencies will be installed into
gulpfile.js file, gulp will handle Sass compiling, vendor-prefixing, CSS/JS minification and browser reloading. It will automate a lot of tedious tasks for us. Magic!
Important: you need to change the proxy string from
'heisenberg.dev/' to your local URL.
Once you’ve adjusted the string, from Terminal or Command Prompt, navigate to your theme directory and run
gulp. Gulp will watch your Sass files and will compile when a change is made. Also, BrowserSync will run and inject new CSS after compilation and will reload the browser when your PHP files change.
CSS/Sass Tasks – gulp will compile a compressed CSS and sourcemap file for you.
./assets/js into a new file named
app.js. It will also create a minified version of the file and place both files in the
The theme will enqueue the non-minified JS file if
WP_DEBUG is set to true in the
What's up with the 'dist' directory? - the
./assets/dist directory is where gulp will send prepared JS and CSS files. The logic behind this is simply a nice segregated place to send and enqueue our files generated by gulp (outputs). That way we can keep our inputs and outputs separated. If you're not a fan and want it to go somewhere else, just adjust the
gulp.dest() paths in the
gulpfile.js for the 'js' and 'styles' tasks. Be sure to adjust your enqueue path in
functions.php as well.
How to use the Foundation Sass files
_settings.scss file, you can overwrite a Foundation default style before things get compiled, thereby making your final CSS lighter. To do so, find the variable in the file, uncomment it, and set the value you desire. The file is located in
Be sure to check Foundation’s docs on using Sass and their mixins for custom control on styles.
Our starter theme follows the Codex Template Hierarchy as found on http://codex.wordpress.org/Template_Hierarchy.
Site Front Page -
This project is based off of Automattic's
_s project, based on the distribution zip
generated off of commit