How To Setup A WordPress Development Environment

WordPressI code on a MacBook where there are many ways to set up your local WordPress development environment. I’ve used really simple solutions like MAMP as well as really robust and setups like Vagrant with VVV. I have recently enjoyed the simplicity of this new setup using Homebrew to install a LAMP stack that, once setup, you never have to touch again to create new development sites. The key is dynamic virtual hosts!

Overview

There is a lot of information in the tutorial, but the general idea is really simple and very cool. Once you get this setup complete you can install new WordPress sites entirely with WP-CLI, the WordPress command line interface. Here is the big picture of what’s going on.

  • Use Homebrew (the OSX package manager) to install MySQL, Apache, and PHP
  • Tell Apache to load sites from somewhere in your home directory like the ~/Sites directory
  • Setup DNSMasq so that any request to the domain you setup for your local development environment returns 127.0.0.1

The DNSMasq thing was new to me, but essentially all it’s doing for you is this. Suppose you want to setup you development environment so that all your dev sites end with .dev as the TLD. For example, you might setup sites like:

  • http://project1.dev
  • http://project2.dev

Once you have this configuration working, the only thing you’ll need to do to create a new project (WordPress or otherwise) is create a folder in your ~/Sites directory with the same name as your domain (without the .dev part). So, in this example, you’d have:

  • ~/Sites/project1
  • ~/Sites/project2

If you wanted to set up project3 then just create ~/Sites/project3 and that’s it! You don’t have to edit your Apache config file and you don’t have to edit your /etc/hosts file.

OS X 10.10 Yosemite Local Development Environment

This tutorial by Alan Ivey describes all the details for setting up your development environment.

So, head on over and set up your OS X 10.10 Yosemite Local Development Environment: Apache, PHP, and MySQL with Homebrew.

A Few Optional Tweaks

After following Alan’s tutorial I decided to make a few adjustments to better suit my needs. Essentially I just needed to make a few changes to:

  • Use a real domain name for local development so I could be reached by the world
  • Run everything on port 8888 because the ISP at my house blocks inbound traffic on various ports

Using An Actual Domain Name

I often develop WordPress plugins and PHP apps that need to receive inbound API calls from external services like PayPal IPN and Cart66 API calls. So I decided to point a real domain to my local development environment so my dev sites could be reached from the outside world.

Register a domain name or pick one from the available list at NO-IP.com. I am using the Plus Managed DNS for $32.95/year (at the time of this writing). This let me use my own custom domain name which I enjoy. Set up your domain with wildcard enabled so http://<anything>.your-domain.com will be sent to your local development environment. It will look like this:

no-ip.com hostname information for local development environment

Use Just The Subdomain For Dynamic Virtual Hosts

If you follow Alan’s tutorial you will be using things like project1.dev for your virtual hosts and the project1 part will be the name of the directory in your ~/Sites directory. If you decide to use a full domain name then you’ll probably want to just use the subdomain as your directory name. So you will want to modify your the httpd-vhosts.conf file to look like this:

<VirtualHost *:8080>
  ServerName your-name.com
  ServerAlias *.your-name.com
 
  CustomLog "/Users/me/Sites/logs/access_log" combinedmassvhost
  ErrorLog "/Users/me/Sites/logs/error_log"
 
  VirtualDocumentRoot /Users/me/Sites/%1
</VirtualHost>

The main difference here being this line:

VirtualDocumentRoot /Users/me/Sites/-2%

changed to:

VirtualDocumentRoot /Users/me/Sites/%1

Here you can see all the different options for plucking off pieces of your domain name with dynamically configured virtual hosting.

Putting Sites In Their Own Directory

The last little tweak I made was putting all the sites in ~/Sites/www rather than ~/Sites because I wanted a directory that held nothing but the projects I was working on. Following the tutorial, you will have these folders in your ~/Sites directory:

  • httpd-hosts.conf
  • logs/
  • ssl/

I went ahead and added a www directory so all the document roots for all my projects are in ~/Sites/www/projectX.  To make that change, all you need to do is tweak your httpd-vhosts.conf file to add the www directory to the VirtualDocumentRoot line like this:

VirtualDocumentRoot /Users/me/Sites/www/%1

The Beauty

Now all you have to do to setup a WordPress site is fire up WP-CLI and do this:

cd ~/Sites/www/project1
wp core download
wp core config --dbname=project1 --dbuser=you --dbpass=yourpassword
wp core install --url=project1.yourname.com --title=Project1 --admin_user=you --admin_password=whatever --admin_email=you@site.com
  • No need to update you Apache settings
  • No need to restart your server
  • No need to modify /etc/hosts

There are things you can do to make installing WordPress sites even easier with WP-CLI – but we can talk about that in another post.

Happy coding!

3 thoughts on “How To Setup A WordPress Development Environment

  1. I enjoyed reading the article post you wrote. I’m glad to hear your thoughts on wordpress development. I hope you will share more future updates with us!

  2. Jay Raut says:

    Thanks for sharing such great information. It was really helpful to me. I always search to read quality content and finally I found this in your post. keep it up!
    Premium Cloud DNS Management

Leave a Reply

Your email address will not be published. Required fields are marked *