Set Up New Roots Install with Grunt & GitHub

This post shows how to set up the excellent Roots WordPress starter theme on a local LAMP stack. This is how I set up my development environment in Ubuntu 13.10.

Create a new folder in /var/www/new-site, and create a new database in PHPmyadmin.

Install WordPress

Add a fresh WordPress installation to /var/www/new-site. Unzip the contents of the wordpress folder – then add the contents of WordPress to the next directory up. This means the root will be localhost/new-site rather than localhost/new-site/wordpress.

Rename wp-config-sample.php to wp-config.php, and connect this to your new database by adding the relevant credentials in the newly renamed wp-config.php.

Add unique authentication keys & salts, which you can generate here. Paste results of the salt generation to lines 45 -52 of wp-config.php.

Navigate to localhost/new-site and fill in site details. Don’t use “Admin” as the username, and set a properly difficult password. Click Install and log in.

Get Roots Starter Theme

Navigate to the new theme directory. Open a terminal and type:

cd /var/www/new-site/wp-content/themes

Clone Roots into this directory by running this command:

git clone git://

Rename the roots directory to “new-site”. When in /var/www/new-site/wp-content/themes, enter:

mv roots new-site

Update theme details in style.css, and replace screenshot.png.

Install Grunt

Navigate to the new theme folder

cd /var/www/new-site/wp-content/themes/new-site

Install Grunt in this folder:

npm install

Start the Grunt watch task by typing

grunt watch

Now (amongst other things!) when the app.less file is changed, CSS will be amended accordingly.

Set Up GitHub

Delete .git and .gitignore in the theme folder. Enter:

git init

in the theme directory – make sure this doesn’t just re-initialize the old .git directory.
Create a new github repository. Skip the “initialize this repository with a README” section.
Push the new theme from the command line:

git remote add origin
git add -A
git commit
git push origin master

Enter github credentials.

Create an alias to allow easy navigation to the new theme.

Create an alias in Ubuntu, so you can easily navigate to the new theme directory.

sudo nano ~/.bashrc

Add the following lines:

# Nav to the new-site repo directory
alias new-site='cd /var/www/new-site/wp-content/themes/new-site'

Save and exit.
Re start terminal – now when you enter


at a terminal prompt, you’ll change directory to the the new theme directory.

The Finale

You should now have a fantastic development environment set up. You can develop in LESS (which is way more efficient than pure CSS) secure in the knowledge that Grunt will compile your work into a single minified CSS file. This makes for an excellent for a development workflow, and is really good for site performance as you’ll likely reduce HTTP requests. If you need to add custom js files, just add them to assets/js/ and name them in the format _*.js. Grunt will pick up on changes to files named in this way and concatenate and minify them to scripts.min.js

You can use GitHub as an excellent way of backing up (and sharing) your work by making regular commits.