Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

WP Foundation

A Wordpress starter theme based on Foundation 5 and Underscores

Please fork, copy, modify, delete, share or do whatever you like with this.

All contributions are welcome!


You'll need to have the following items installed before continuing.

  • Sass: Please use Sass 3.3 or 3.2, 3.4 conflicts with Foundation 5.4
  • Ruby: Needed for Sass
  • Ruby Gems: Used to install Sass
  • Node.js: Use the installer provided on the NodeJS website.
  • Grunt: Run [sudo] npm install -g grunt-cli
  • Bower: Run [sudo] npm install -g bower


The workflow is setup to create a clean separation from your source code and actual dist version of the theme. I use some grunt tasks as build tools to help accomplish that goal.

The default grunt task will build your dist ready version in a folder called dist in the project's root directory. If you're working localhost and the project is in the wp-content/themes folder you may want rename the project dir (the one you're working in) to something like my-theme-dev and set the rsync dist destination to ../my-theme.

cd my-wordpress-folder/wp-content/themes/
git clone
mv wp-foundation .wp-foundation
cd .wp-foundation
npm install && bower install

When you're ready to generate the actual theme files run: grunt. It will create a dist folder with all the theme files ready to be used as wordpress theme or parent theme.

** Notice that I do mv wp-foundation .wp-foundation. Since you're likely to install the project in your wp-content/themes directory, you'll want to hide the actual project directory from Wordpress, otherwise you may see duplicate themes in appearance/themes once you've run grunt as it will build your actual theme in the theme directory as well as the dist folder.

Check for Foundation Updates? Run: foundation update (this requires the foundation gem to be installed in order to work. Please see the docs for details.)


All SASS files are located at src/assets/sass. the default grunt task will genereate a style.css from that for you.

Bower and vendors dir

Front End packages are managed by Bower and loaded to src/vendors

See Bower for details

How to get started with Foundation


Below is the grunt deploy task configuration, the dist task actually creates a local dist ready version just outside the project root. This allows you to work localhost host and select the theme from the admin. The stage task actaully deploys to a remote server ready to wow adorning fans.

Warning Do not name the dist dest: to the same name as the project dir you're working in, you'll erase your entire working project with dist ready version. Yikes

   rsync: {
		    options: {
		        args: ["--verbose"],
		        exclude: [".git*","*.scss","node_modules"],
		        recursive: true
		    dist: {
		        options: {
		            src: "./dist/",
		            dest: "../wp-foundation/"
		    stage: {
		        options: {
		            src: "dist/",
		            dest: "/path/to/wordpress/wp-content/themes/wp-foundation/",
		            host: ""

Learn how to use WordPress



A WordPress starter theme built on Foundation 5 and Underscores






No packages published

Contributors 4