Develop WordPress Sites Like A Boss – (Part 1)

Advice on WordPress development workflows is a dime a dozen online. Everyone seems to have the best workflow, but I’ve tried many and haven’t felt like a pro until I stumbled upon Trellis. Trellis allows me to quickly spin up a local dev environment and allows me to manage all of my deployment. If you’d like to feel like a boss when you develop with WordPress, then follow along and get set up with Trellis.

Getting Started

Before we begin, this tutorial assumes you have Git, Virtualbox, Vagrant, and the Vagrant plugins (vagrant-bindfs and vagrant-hostmanager) installed. Before proceeding, you will need to install these tools.

Installing Necessary Project Files

First, let’s create an empty directory where all of your project files will live. Open up your terminal and move into your folder of choice. Now, run, mkdir projectname && cd projectname replacing projectname with the name of your project. This command will also move into your newly created directory. Next, we will clone the Trellis files inside of your project directory.
git clone --depth=1 git@github.com:roots/trellis.git && rm -rf trellis/.git

This will pull down all the necessary files for you to use Trellis to manage your WordPress project. Now, we’ll clone Bedrock, which Trellis uses to change the default WordPress project structure, allowing you to easily configure WordPress.
git clone --depth=1 git@github.com:roots/bedrock.git site && rm -rf site/.git

It’s that simple. Now we have everything we need to begin configuring our project and start developing.

To begin the habit of using git to manage our project, let’s initialize an empty repository using git init. Now we can add the Trellis files that we cloned into our project folder using git add .. Finally, we will commit those files to our repo using git commit -m “Initial commit for Trellis project”.

Configuration

Configuration within Trellis is fairly straightforward. Open up your project folder in your code editor of choice and take a few moments to poke around and familiarize yourself with the folder structure. Once you’ve looked things over we can move onto configuring for local development.

Setting Up Trellis group_vars

This is where you begin configuring your site for local, staging, and production. With minimal setup using these config files, you can let Trellis handle all of the heavy-lifting. Open up trellis/group_vars/development/wordpress_sites.yml .

This file is written in YAML (an indentation-based language). It will be one of the files used to configure your local development environment. Inside this file, you will see the main object wordpress_sites that holds the example.com object. This object contains a number of configuration properties. Each site begins with a key. In the case above, the key would be example.com. Now let’s start making changes to this file to set up our local site with Trellis.

Here you can see the inline git diff of the wordpress_sites.yml file I’ve edited for my local trellis setup. I’ve replaced example.com site key with my site name chrisellinger.com. For the local development URL, I’ve replaced example.dev with chrisellinger.dev. I’ve also decided to remove the redirects because it’s unnecessary for local development. Follow my example to edit your wordpress_sites.yml using your site URL to replace both the site key and local development URL. The last thing is to replace the admin_email with your email. Save that puppy, commit your changes and we can move to the next step.

For local development, we won’t bother messing with the `vault.yml` file. For more on `vault.yml` and passwords/security with Trellis, see Part 2.

Time For Vagrant Up

Now it’s time for all of the magic to happen. As you can see we’ve edited a few lines and removed a couple lines, that’s it. This is the power of Trellis.

In your terminal move into the trellis directory inside of your project folder and run vagrant up. Go grab a drink while your Vagrant machine is created. In about 5-10 minutes you’ll have a server running with a spiffy new WordPress installation to begin working with.

And… That’s It!

Congratulations! You can now navigate to your site in your browser using the development URL you used when you edited the wordpress_sites.yml file. To log in to the WordPress dashboard just add /wp-admin to the URL as normal and it will forward to the correct address. Log in with the username admin and password admin.

You now have a local install to play around with. For any theming, your theme files will go inside site/web/app/themes. To stop your vagrant server you can use vagrant halt. Anytime you want to spin it back up just make sure you’re in the trellis directory inside of your project folder and run vagrant up.

In Part 2 we will explore how to configure Trellis for your staging/production servers, and how to deploy your site using Ansible.