Skip to content Get in touch

Contact form

Developing with WordPress – part 2: Set up your own site

Last week we showed you how to set up VVV (Varying Vagrant Vagrants). Today we continue with this topic and show you which configuration is needed to set up your own site there. If you haven’t installed VVV yet, please do that first.

Before creating a new site you’ll need to understand a bit of the file structure that VVV uses. First there is the vvv-custom.yml file that contains the configuration of all your sites and then there is the www folder where the actual code of your site will be placed, with some configuration files as well. Let’s dive a bit deeper into both of those.

Add your site to VVV configuration

The first step is to add your site to the VVV configuration file. In the root of your VVV installation you will find the vvv-config.yml and vvv-custom.yml files. If the vvv-custom.yml doesn’t exist yet, then just create this file by copying the contents of vvv-config.yml to this file. This is a one time process, you don’t have to recreate this file every time.

When you open the vvv-custom.yml file you will see some comments about what this file does, and as you scroll further down you will see the list of the current installed sites, the ones that come default with your VVV installation. Let’s take a look at one of those:

wordpress-default:
 repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
 hosts:
 - local.wordpress.test

On the first line you see ‘wordpress-default:’, this is the name of your site. This name is important for where the files will be created, as we will see a bit later. The ‘repo:’ is linking to the repository of your site. This is completely optional, when you add this line VVV will clone the contents of this repository to your site. If you don’t have a repository or just want to start out fresh and set the repository up later you can just remove this line. Then there is the ‘hosts:’, this tells VVV which hosts it should set up for your site. You need at least one host, in this example that is ‘local.wordpress.test’ but you can have multiple as well.

If you want to add your own site to VVV then all you have to do is add a similar entry as the one above to your vvv-custom.yml file. So if I want to create an ‘Exove’ site that runs on exove.local without having a repository to begin with, all I have to add is this:

exove:
 hosts:
 - exove.local

This will tell VVV to create the exove.local host. As mentioned before, the name of the site is important. We named our site ‘exove’ and this means that VVV will search in the www directory for the ‘exove’ directory. Let’s see how that works.

The WWW directory

In the root of your VVV installation you will see the www directory. On a clean install of VVV this directory contains only the wordpress-default and wordpress-develop directories, which happen to have the exact same names as the names of the sites in your vvv-custom.yml. This is not a coincidence, when VVV loads the sites in your configuration file it searches for the directories with those site names in the www directory. So for our example we need to create the exove directory in the www directory.

After creating the exove directory you are basically good to go, but that will only create an empty site. And as we are doing WordPress development here it would be nice to have WordPress installed right away. So go to your www/exove directory and create a new directory provision. In this newly created directory we are going to create two more configuration files, which you can copy directly from here:

File: vvv-init.sh

#!/usr/bin/env bash

# Make a database, if we don't already have one
echo -e "\nCreating database '${VVV_SITE_NAME}' (if it's not already there)"
mysql -u root --password=root -e "CREATE DATABASE IF NOT EXISTS ${VVV_SITE_NAME}"
mysql -u root --password=root -e "GRANT ALL PRIVILEGES ON ${VVV_SITE_NAME}.* TO wp@localh$
echo -e "\n DB operations done.\n\n"

# Nginx Logs
mkdir -p ${VVV_PATH_TO_SITE}/log
touch ${VVV_PATH_TO_SITE}/log/error.log
touch ${VVV_PATH_TO_SITE}/log/access.log

# Install and configure the latest stable version of WordPress
cd ${VVV_PATH_TO_SITE}
if ! $(wp core is-installed --allow-root); then
 wp core download --path="${VVV_PATH_TO_SITE}" --allow-root
 wp core config --dbname="${VVV_SITE_NAME}" --dbuser=wp --dbpass=wp --quiet --allow-root
 wp core multisite-install --url="${VVV_SITE_NAME}.local" --quiet --title="${VVV_SITE_NAM$
else
 wp core update
fi

File: vvv-nginx.conf

server {
 listen 80;
 listen 443 ssl;
 server_name {vvv_site_name}.local;
 root {vvv_path_to_site};

 error_log {vvv_path_to_site}/log/error.log;
 access_log {vvv_path_to_site}/log/access.log;

 set $upstream {upstream};

 include /etc/nginx/nginx-wp-common.conf;
}

Configuration files explained

Let’s go through what those files mean: vvv-init.sh tells VVV to create a database for the new site with the same name of the site and grants permission to the wp user on this database. It then creates empty error and access log files and finally either installs or updates the latest version of WordPress in the directory.

The vvv-nginx.conf file tells VVV to configure nginx to serve this site. Both files above are completely dynamic, so you can use them again and again every time you create a new site.

Provisioning

Now there is only one thing left to do. Telling VVV to load the new info and we do that with running the $ vagrant reload --provision command in the VVV folder. The provision command gives instruction to VVV to load the new info from the vvv-custom.yml file and from there on load the files in your site’s directory. This is the right moment to go get some coffee because this will take a while, but if all is configured okay you will eventually see your terminal telling you that all is done and you are ready to go. Open http://exove.local in your browser and you will see your new site running.

Finally, you can now experiment with your own site. It seems a lot of work but with a bit of practice you will do those steps very quickly in the future.

You can make changes to the files in your www/exove directory. VVV will pick up those changes right away as it synchronizes that directory with the folder on the virtual machine, no need to reload every time you make a change.

More about this topic

Other thoughts

More thoughts