My WordPress-development setup

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 tools/frameworks

The following tools/frameworks are included in my setup.

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:

cd roots

And type:

npm install

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:

grunt

This will check for changes in your less/javascript and compile into one single minified css and one single minified javascript.

If you wan’t to get this automated type:

grunt watch

This way Grunt will stay in listening mode and watch for all changes you make to files in the theme folder, and automatically minify and compile less/javascript.

3 svar på “My WordPress-development setup”

  1. Hi there would you mind letting me know which hosting company you’re working with?
    I’veloaded your blog iin 3 completely differtent browsers and
    I mus say his blog loads a lot quicker then most.
    Can you recommend a good hosting provider aat a reasonable price?
    Thank you, I appreciate it!

  2. I am new to roots theme developing and I find out very difficult to find good tutorials regarding the theme setup, fortunately I found your post very explanatory. Thank you.

    Nuno @http://www.nuno-sarmento.com

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *