Posted on May 7, 2013 by Curtis McHale

Vagrant and Custom Domains with WordPress

Last week we looked at installing Vagrant with WordPress using Varrying Vagrant Vagrants. Now that left us with the default configurations and domains for our projects. Certainly fine to start out with, but really we want to use custom domains that match our client live or development domains.

So today we will add a custom domain to our Vagrant install as well as a new WordPress install for that custom domain.

If you haven’t watched the first screencast or read the post go do it and if you’re just here for the screencast, jump to the bottom.

Starting Out

The first thing we need to do is to open up terminal and switch to whatever folder you want to use for all your web development sites. For me that means typing cd ~/Dropbox/Sites/.

Next we need to clone the Varrying Vagrant Vagrants repository.

git clone git@github.com:Varying-Vagrant-Vagrants/VVV.git fancy-domain

That will put the repository files in a folder call ‘fancy-domain’. Now we need to dig in to the project and make some changes to the Vagrant configuration files.

Create a Database

Our first customization will be to create a new database for our custom site to live in. Navigate to ‘fancy-domain/database/’. Now we need to copy the file called ‘init-custom.sql.sample’ and we will call it ‘init-custom.sql’. We can do this directly from Terminal by typing cp init-custom.sql.sample init-custom.sql which will copy the file and name it ‘init-custom.sql’.

Now open ‘init-custom.sql’.

001-create-db

In here we see some basic SQL that will create a new database and a new user with priviledges on the database. Since this is a local testing environment, I don’t bother getting fancy I make the database name, user, password match the client. So in our demo case here they would all be fancydomain. Once you’ve made the changes save the file.

Add to the nginx configuration

Now we need to make some changes to the configuration of nginx so that it knows about our new custom domain location. Navigate to ‘/fancy-domain/config/sites’. Here we see a few files, but the one we are interested in is the one called local-nginx-example.conf-sample. Again we want to copy this file with a new name, but this time we want the name to match our custom site. So type cp local-nginx-example.conf-sample local.fancy-domain.com.conf. Now open the new file.

002-nginx-config

Here we just need to make a few changes. On line 28 we need to change testserver.com to ‘local.fancy-domain.com’ and on line 31 we need to change /srv/www/wordpress-local; to /srv/www/fancy-domain. All we did was tell nginx to listen for local.fancy-domain.com and send requests for that domain to the folder found at /srv/www/fancy-domain.

Final Setup Step

Now we need to edit the hosts file on our computer. In Mountain Lion you can find it by typing ‘sudo vim /private/etc/hosts’ which will prompt you for a password then open the file in Vim. Just like when we set up our basic Vagrant site, we need to tell our computer to send web browser requests for local.fancy-domain.com to our local IP.

If you have done the previous tutorial as well, then you should already have a line that looks something like this.

192.168.50.4 local.wordpress.dev local.wordpress-trunk.dev

To the end of that line we need to add our new custom domain as you see below.

192.168.50.4 local.wordpress.dev local.wordpress-trunk.dev local.fancy-domain.com

Now we need to start up the server by typing vagrant up inside our fancy-domain folder. Remember this is the first time we have started this server so we need to wait a few minutes while it downloads 300mb of stuff.

Create Your WordPress Install

Now that we have booted up the server you can navigate to ‘fancy-domain/www’ and you will see a folder called ‘wordpress-default’. Duplicate the folder then rename it to ‘fancy-domain’. Then go inside and remove the wp-config.php file.

That’s about it, navigate in your web browser to local.fancy-domain.com/wp-admin and you should see the stock WordPress
install screen. Remember we named the database, user, and password fancydomain. Keep it set to localhost. Then install WordPress and you’re rocking custom domain inside Vagrant for your client.

Screencast