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://github.com/roots/roots.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 https://github.com/DavidCWebs/new-site.git 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
new-site
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.
