Intro to Modern WordPress with Trellis, Sage and Bedrock

UPDATE: I updated this post here 👀

WordPress is a beast. Setting up your local machine, mysql, keeping track of users, managing dependancies and plugins, setting up your vhosts—jeez, all of that can be a daunting task. Let’s automate some things.

I’m making a few assumptions here. Such as you probably have Node, npm and Bower installed on your Mac. We’ll begin with Homebrew. Full disclosure, I forked Dave Kiss’ take on his champion WordPress workflow with some of my own tweaks. Feel free to check out his setup too, it’s really great.

The whole walkthrough should take about 15-20 minutes of your time on a modern machine. Let’s get started.

Homebrew

Curl Homebrew:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Make sure to run brew doctor afterward to make sure you have everything installed all nice and neat.

Git, Ansible and Composer

Now that we have Homebrew installed, let’s go ahead and install some goodies for our workflow and get started. Composer will manage our plugins. It’s awesome.

brew install git ansible composer

Install VirtualBox

Go ahead and install your VirtualBox software and follow the prompts.

Install Vagrant

Next, download and install Vagrant. Pretty painless.

Beginning a Project with Trellis

Next, mkdir -p ~/Sites/example.com where example.com is the name of the project.

Then, go ahead and cd ~/Sites/example.comWe should be inside the example.com directory. Now we’re going to clone Trellis into a new directory called ansible with this command:

git clone git@github.com:roots/trellis.git ansible

Provision the Ansible roles and packages.

cd ~/Sites/example.com/ansible && ansible-galaxy install -r requirements.yml

Bedrock

Finally onto Bedrock. A simple WordPress boilerplate and configuration and improved folder structure for your project. Clone it into a new folder called site

cd ~/Sites/example.com && git clone git@github.com:roots/bedrock.git site

Installing the WordPress Core and any Other Composer Dependancies

cd into the new folder called site and let’s get this party started.

cd ~/Sites/example.com/site && composer install

More Ansible Stuff

If you’re like me, you probably have Sublime Text aliased. But click here if you haven’t aliased Sublime. Or if you’re into Vim and all that, that’s cool too.

subl
 ~/Sites/example.com/ansible/group_vars/development/wordpress_sites.yml
 

Go ahead and configure your db_namedb_user and db_password and everything else to your liking.

Now the real fun stuff begins. We’re going to cd to the ansible sub-directory we previously created and start up vagrant and the virtual machine voodoo. It will prompt you for your system password because it’s going to add example.com to your /etc/hosts file. No biggie, but you should know.

Also, this will take a while. Probably 10+ minutes or so.

cd ~/Sites/example.com/ansible && vagrant up

If you got any errors, don’t worry. Vagrant might ask you to install a few additional pieces of software for Vagrant. Go ahead and heed Vagrant’s advice. If it appears that your install falls into a timeout loop, run vagrant reload and hopefully that should resolve any timeout errors in the setup.

You should be able to navigate to http://example.dev in your browser and see the fruits of your labor!

Sage

Now that we have WordPress installed, let’s get a starter theme going with Sage. Let’s cd to the theme-root and clone the Sage repo over:

cd ~/Sites/example.com/site/web/app/themes && git clone https://github.com/roots/sage.git

Now let’s rename the Sage directory to our new-theme-name:

mv sage new-theme-namecd to the new-theme-name and npm install && bower installNow you can run gulp in that directory and build your theme! http://example.dev should now have some styles. Sage comes with Bootstrap by default, but you can swap it out for whatever framework you want. Or no framework at all! Whew—that was a lot of steps but way less painful than it could’ve been! More about Sage here.