When I was attending Sweden Social Web Camp(SSWC) 15th-18th of August 2013 there was a session on WordPress and Bootstrap, held by @jonkpirateboy at Follow Me Darling in which we discussed different methods to easily and quickly setup a good dev-environment without the hassles of having to minify css/js, set up menus, static first page etc. in WordPress.
It ended up in me holding a short session on how my setup looks and what frameworks/themes I use. This is something that is evolving over time this is what I’m elaborating with at this moment and could change in a couple of months. At the moment I’ll stick to this method in both my personal projects and professional ones.
Update: Since Sweden Social Web Camp was held the main branch of Roots theme have also adopted this, which makes it an even more future proof, and easy, setup for your WordPress development.
The following tools/frameworks are included in my setup.
- Latest version of WordPress
- Roots theme,
extended to the Grunt-branch(it’s been merged into Roots since my session at SSWC!)
- Node Packaged Modules
- A web server(I use MAMP)
As I develop on the OS X platform that is what this tutorial will show when it comes to installations of npmjs, grunt, git usage etc. Questions or problems regarding Windows dev environments are really welcome and I’ll do my best to help you out.
Get the tools running (NPM, Grunt)
The first step, if you haven’t already installed a web server is to do that, there’s a lot of different options here, try WAMP(Windows)/LAMP(Linux)/MAMP(Mac) depending on your platform, they are quite easy to get up and running. This will give you a development platform with mysql, apache and phpmyadmin up and running, and makes it possible to run WordPress on your local computer.
The next step is to install nodejs and get access to Node Packaged Modules(NPM). Go to nodejs.org/download and select the correct(Windows/Macintosh/Source), then just follow the instructions on the screen. If everything goes well you should now have nodejs installed on your computer by now.
Now that you have nodejs you get access to node packaged modules, which is how Grunt is shipped. To download grunt type:
npm install -g grunt-cli
If you want to dig deeper into Grunt make sure to read the Getting started with grunt page, it explains more about the installation and how Grunt works.
Download Roots theme and configure it
The next step is to download the Roots theme. When I held this session at Sweden Social Web Camp I talked about Roots and Grunt in terms of a popular branch at Github, that had all the Grunt tasks etc. Since then the developers at Roots integrated it(since 6.5.0) so it’s standard in the theme.
You find it at github, and the easiest way to download it is by going to the Github page and hitting ”Clone in desktop”, or if you are familiar with using the terminal, by hitting this command:
git clone https://github.com/roots/roots.git .
Notice the dot on the end, this tells to Github to clone the roots folder into your current location and therefore the above command assumes that you are in your WordPress themes folder(For example: /Applications/MAMP/htdocs/mysite/wp-content/themes/ if you use MAMP on Mac).
You could change the command to get roots cloned into a theme folder named after what you want, by changing the dot into a folder name of your choice:
git clone https://github.com/roots/roots.git swedensocialwebcamp
By now you have the theme downloaded to your local dev environment and the very last step is to install the grunt tasks that Roots use. Enter the theme folder by typing the name of the theme folder:
Thanks to the integration of Grunt into the main Roots theme at Github you don’t have to do anything else than this. Now we have all tools installed and the next thing would be to just type:
If you wan’t to get this automated type: