A WordPress Development Setup – Part 1

Having worked with WordPress for the best part of 8 years now I have gone through a number of different setups in order to develop a WordPress site. However I think I have finally found one that works the best of the lot and therefore here is my WordPress development setup.

This article will come in three parts as the setup is a two step process. There is the setup for every site and then the steps that need to be taken for each site I develop. So here goes with part 1.

macbook-air

Local Development Using MAMP

You should start off developing a website on your local machine. It has a number of advantages such as speed of page load and the fact that you can play and mess around without anyone having access to your site other than you. There area a number of options in order to get your sites setup locally on your own machine however the option that I have been using for a while now is MAMP.

MAMP is Mac, Apache, MySQL and PHP all bundled together in one easy install, which is all the tools you need to run a WordPress site. Therefore download and install MAMP the usual way according to the setup instructions on the MAMP website.

Changing the Local Hosts File

Being a freelance WordPress developer I tend to work not only for myself but with a number of agencies and therefore I like to keep my work separate in different “sites” on my local machine. To do this I have used virtual hosts. This enables a more custom local domain to work on for different clients. So work I do for myself will be done locally at local.dev, whereas work I do for Pixel Junction is done at pixel.dev and finally work for Compass Design is done at compass.dev.

To set this up you need to get familiar with your computers local hosts file and virtual hosts. I covered this when talking through using MAMP with WordPress Multisite, so I am going to assume that you have created a host for any of the “domains” you want to host your sites on. In my local hosts file I have something like the following:

127.0.0.1       local.dev
127.0.0.1       pixel.dev
127.0.0.1       compass.dev

This allows me to use those ‘domains’. However we have yet to let Apache know where the files for those sites are. Therefore to do this we need to create these virtual hosts in Apache. This points the request for that host to the correct folder on your computer where you are hosting the files so they can be served to your browser.

Setting Up Virtual Hosts

Again allow MAMP’s Apache to use the Virtual Hosts file is covered in the article above, therefore I am going to assume that you have done that and you are editing the Virtual Hosts config file in apache. You would need to add to that file the following block, for each of the hosts:

<VirtualHost *:80>
    ServerAdmin webmaster@local.dev
    DocumentRoot "/Applications/MAMP/htdocs/local/"
    ServerName local.dev
    ServerAlias local.dev *.local.dev
</VirtualHost>

You would obviously change the document root to wherever you are storing your files for that site. You would also need to change the ServerName to the host your are using. In ServerAlias I add a starred entry so that I can use sub domains, for example in a multisite install, although any additional sub domains would need adding to your local hosts file too.

Using the example above, I can now create sub folders inside the /Applications/MAMP/htdocs/local/ folder and access them at URLs such as local.dev/subfolder.

That covers the first part of this tutorial on getting the environment setup and ready to start working with. The second part (coming soon) covers the steps to take for working with each site that you create, including getting the site under version control with Git and Github.

Read Part 2 of 3 about creating A WordPress Development Setup here.

Published by

Mark Wilkinson

Lead developer & owner at Highrise Digital @highrisedigital. Develops the @wpbroadbean plugins. Former teacher.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s