Intro to Modern WordPress with Trellis, Sage and Bedrock
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.
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
Go ahead and install your VirtualBox software and follow the prompts.
Next, download and install Vagrant. Pretty painless.
Beginning a Project with Trellis
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 firstname.lastname@example.org:roots/trellis.git ansible
Provision the Ansible roles and packages.
cd ~/Sites/example.com/ansible && ansible-galaxy install -r requirements.yml
Finally onto Bedrock. A simple WordPress boilerplate and configuration and improved folder structure for your project. Clone it into a new folder called
cd ~/Sites/example.com && git clone email@example.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.
sublGo ahead and configure your
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 upIf 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!
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.gitNow let’s rename the Sage directory to our new-theme-name:
mv sage new-theme-name
cd to the
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.
Comments, discussion & feedback.
Was this post helpful? Does it need work? Let me know below.