A WordPress starter theme built on Foundation 5 and Underscores
CSS PHP JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.bowerrc
.gitignore
Gruntfile.js
README.md
bower.json
composer.json
package.json

README.md

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!

Requirements

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

Quickstart

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 https://github.com/micahblu/wp-foundation.git
mv wp-foundation .wp-foundation
cd .wp-foundation
npm install && bower install
grunt

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.)

SASS

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

Deployment

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: "user@site.com"
		        }
		    }
		}

Learn how to use WordPress

Demo