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.

Hello, World!

Oh wow! I’ve actually managed to find someone to read this. First off. let me thank you for taking time to check out my site. I’ve debated endlessly on the necessity for me to add my two cents to an already abundance of web development articles online. I’ve questioned whether I even had a voice to offer an opinion or guidance. However, I’m doing this more for myself. Should someone stumble upon one of my Notes and find even a nugget of value, then that’s a bonus.

 

What’s your goal with “Notes”?

I guess I want Notes to be a repository of things I’ve learned. Then, maybe sprinkle in a tip or trick I’ve picked up along the way. Ultimately I’ll probably use it to look back at to refresh my memory. Remember, this is more for me. Ever have those moments where you’re writing something and the spelling just looks off, but it’s right? Well, sometimes I have that but with web development. Thankfully, I’ve gotten to the point where – at a glance – things will pop back into memory. It took awhile to get there. I’m not afraid to admit that sometimes I forget how to write a for loop.

Why should I read what you have to say?

That’s a damn good question. To be honest, I’m not sure. I’m not some coding God. I struggle with this stuff all the time. I’m not going to write about something someone else couldn’t explain way better. But I won’t let that stop me from trying. I absolutely love what I do and that keeps me going. I’ve found that my desire to become proficient enough at development, to charge real monies has only grown my persistence. When faced with a challenge I see it through no matter what. I hate not knowing something. While that doesn’t make me an authority on anything I’ll be writing about, I hope that does mean that you can trust I’ll be guiding you down the right path.

What will you be writing about?

I will be writing about the technologies, frameworks, and systems I use regularly. I’ll also attempt to write about things I attempt to cram into this already crowded brain. The thing I love about development is the same thing I hate about development. Learning new things is awesome. Having to learn new things so quickly can be tiresome. As soon as you feel you’re getting the hang of a new thing, you look up and the entire community has moved on to the new shiny thing. When I first started out my ability to learn was stifled by this shiny object syndrome. If you’re looking for something on trending topics, I’m probably not your guy. I’ll be sticking with topics relating to  HTML, CSS, WordPress, JavaScript, Node, and Vue.

If you wait until you’re “ready” and “an expert”, you waited too long and missed out on the most important part

In Conclusion

I hope you find your way back. I really want to deep dive into topics I find interesting. Should I get comfortable regurgitating the stuff I feel I understand, I would love to start teaching others. The deeper I get into my journey as a developer, the more I understand the importance of helping others. I wouldn’t be here without the help and support from other developers (whether directly or indirectly). It’s an amazing community to be a part of and I’m tired of waiting until I’m “ready” to give back.