My local WordPress development setup

I’m a designer, not a developer. Just in case that isn’t obvious, I’ll say it again: I’m a designer, not a developer. Ok, now that we established that, I should add I’m a fairly versatile interaction designer that likes to pretend to know what’s going on when it comes to developery stuff 😛

In the past, I never really had a local setup for WordPress development. I always relied on my server with my web host – the awesome Media Temple. But in the last couple of years I’ve been trying to be more mobile, and go work from a coffee shop, or a flight without wifi… you get the idea.

I had done local WordPress development in the past using MAMP (there’s a ton of tutorials out there on how to do this, Google it), but the setup was always a drag. So, a while back I discovered Desktop Server, an app to setup local WordPress environments quickly. It made it super easy to setup a WordPress local site in a few minutes. It also lets you setup local domains for the development – I used .dev – and put the sites in whatever directory you want. The caveat is that their free version only allows you to have 3 sites and it doesn’t allow for WordPress Multisite installations (easily). Their pro paid version is kinda expensive, at $99.95. I started digging into it to figure out how it’s doing things… I discovered it uses XAMPP to run the local webserver, so finding online resources with information was easier. In the process I realized I could do all this in MAMP easily, and so I went back to using MAMP!

Let’s get started

I’m on a Mac, using MAMP, and since I want to run things off of specific folders and use prettier local development domain (come’on, I’m a designer, what did you expect?), I use MAMPs Virtual Hosts file to make all this happen.

First off, open MAMPs httpd.conf file, located in Applications/MAMP/conf/apache/httpd.conf. Locate the following bit in that file:

# Virtual Hosts
 # Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Uncomment the include line:

# Virtual Hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Then, we open the httpd-vhosts.conf file and lets add our development environment there. Here’s my setup:

<VirtualHost *>
    DocumentRoot "/Users/hugobaeta/Documents/Websites/wp-core.dev"
    ServerName wp-core.dev
    ServerAlias *.wp-core.dev
    <Directory "/Users/hugobaeta/Documents/Websites/wp-core.dev">
      Options Indexes FollowSymLinks ExecCGI Includes
      AllowOverride All
      Order allow,deny
      Allow from all
    </Directory>
</VirtualHost>

Now, I’m not gonna pretend I know what all those options are… I got this from some exemple a while back and have been using it ever since. If you know what’s going on there and believe I’m doing something wrong, please leave a comment so I can fix it 😉

The essence of this is that I’ll be running my WordPress install off of my Documents folder, in /Websites/wp-core.dev/ – all WordPress files go inside that /wp-core.dev/ folder. Also, I’ll be accessing this site simply by typing wp-core.dev on my browser. Sexy, right??

Now, some tutorials don’t mention this, but I found it necessary for this to work. You need to launch terminal (I know… I hate it too, but you can change the colors to make it look nicer!! hahaha) and edit your hosts file. This file basically tells browsers in your computer where to find certain websites. It’s super handy if you wanna develop something locally with the same domain as the final site… but that’s a whole other post.

In Terminal (just use spotlight to find the Terminal App), type:

sudo nano /etc/hosts

Type your computer password when prompted, and you’ll be presented with a sort of old school (DOS represent!) text editor. The file will look something like this:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost

Now, add the following at the bottom of all that (you have to use your keyboard to take the cursor there, no mouse!):

##
# Local Dev Server
##
127.0.0.1 wp-core.dev

This is telling the computer that our local IP (127.0.0.1 – it should be the same for you) will respond to wp-core.dev domain.

If you wanna do a WordPress multi-site local install, with a sub-domain structure, you’ll need to add all the subdomains there as well, like so:

##
# Local Dev Server
##
127.0.0.1 wp-core.dev
127.0.0.1 site1.wp-core.dev
127.0.0.1 site2.wp-core.dev

When you’re done editing, press ctrl + X to exit followed by y to save and enter.

Finally, restart your MAMP server and go to your favorite browser and type wp-core.dev – that directory (if you created it and added stuff to it) should show up! BOOM!

First time I accomplished this I felt so smart! It’s the small things my dears, the small things… 😀