Modern WordPress Development with Bedrock

If you’re developing WordPress plugins or themes, then you’ve probably heard about Roots.io. It started as a starter theme and evolved into a range of tools. Roots is one of the most complete toolsets for developing WordPress themes, plugins and sites.

Roots consists of:

1. Sage
2. Bedrock
3. Trellis

In this article we’ll cover Bedrock. Bedrock is WordPress stack that helps you build websites for a modern web. You can also drop your WordPress folder into an environment like MAMP or WAMP, but Bedrock takes it further.

A Few Words about Bedrock

Bedrock is standard WordPress plus some additional things to make the configuration, dependency management and the folder structure more friendly when developing.

What I like about Bedrock is that it embraces the Twelve Factor App. Originally presented by Heroku (a PaaS for web applications), it’s a set of ‘rules’ on how a modern web application should behave. Also, the people behind Roots have written an applicable methodology for WordPress that you can find here.

In this article we’ll show you how to get up and running with Homestead and Bedrock. After this you can also check out Trellis for a more complete setup. If you don’t know what Homestead is, then take a quick read of their docs. Set up the Homestead environment on your system and then follow the next steps.

Installation

These steps are also in the Bedrock documentation, but some are additional steps due to the Homestead environment.

homestead edit

My configuration file looks like this:

---
ip: "10.1.1.33 "
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/projects/Homestead/
      to: /home/vagrant/Code

sites:
    - map: bedrock.app
      to: /home/vagrant/Code/bedrock/web

databases:
    - homestead
    - bedrock

variables:
    - key: APP_ENV
      value: local

You’ll see we have a folder called projects in the home directory, and inside that, a folder calledHomestead. Here’s where we’ll install the Bedrock files. Since ~/projects/Homestead/ for my primary OS is mapped to /home/vagrant/Code/, then my Bedrock path will look like/home/vagrant/Code/bedrock/. In my configuration, I use /home/vagrant/Code/bedrock/web. That’s because index.php (the file that bootstraps everything), lives in that folder.

cd ~/projects/Homestead
git clone https://github.com/roots/bedrock.git

The folder structure of Bedrock is a bit different. Inside the Bedrock folder you have .env.example. That is an environment file. Inside that file you can add variables that can be accessed through the project. However, first you have to rename it to .env.

Until now we only have the skeleton of your project. No WordPress files are actually installed yet. As this skeleton is driven by Composer, we have to install the additional packages.

homestead ssh
cd Code
cd bedrock
composer install

If you try to open bedrock.app in your browser, you’ll get this error:

The problem is in the .env file. If you open this file, you’ll see some variables for the database connection, SITE_URL, HOME and the ENV itself. In homestead.yaml we specified the database name ‘Bedrock’. For every new database, Homestead sets the username to ‘homestead’ and the password to ‘secret’, DB_HOST is changed to localhost, the WP_HOME and WP_SITEURL to http://bedrock.appand http://bedrock.app/wp, because this is our real URL in the dev environment.

Now, let’s check again in our browser for bedrock.app. This time everything is fine.

My .env configuration:

DB_NAME=bedrock
DB_USER=homestead
DB_PASSWORD=secret
DB_HOST=localhost

WP_ENV=development
WP_HOME=http://bedrock.app
WP_SITEURL=http://bedrock.app/wp

# Generate your keys here: https://api.wordpress.org/secret-key/1.1/salt/
AUTH_KEY='!+H!/A6=1q|%~[r|wlxjj08D/:]PIC}Gd 66WlQyAqj(:/-`EBxAu-f}@G,rh-!Z'
SECURE_AUTH_KEY='3:NWn8%*w>Y7V;H_IM
LOGGED_IN_KEY='N=*D115ejwdp|6g]KLiggtg4@`
NONCE_KEY='XIRn1WSc4d=3VM!,7DyC;dF2S-KRuf/2GqNtO-Le=x5P<8 h="" z="">'
AUTH_SALT='#lZGMcjd?pU/4Nh-4&R.By$BW3>o(4VkIH6T0c@+E_*9*)vY21*zwMC`]WJ:4mHd'
SECURE_AUTH_SALT='v?${}-#bZI>SaoZbQ*-ZP/ c^Ic3YhN&|si}&U0B!+UPCZE8(bg)&;Tz)8=0$U>['
LOGGED_IN_SALT='~;7I1PZ-o>JRMVEWPxeAiDlN1<%|!g@4^H+aU*3#=%vZ}q<7uc ck:5="" k="" span="">
NONCE_SALT='EMtD>gE l)!u+:QW ;$hf2B0^NTV-])?>_6T6Iv=S*LOuzL&+n|P]{hZ]<0jg- b="" span="">

If you’re going to setup this on a remote server, the URL will be different, this is only for a local installation. Also keep in mind that .env should be in your .gitignore. Since you want to have different configurations on the server, the code itself is environment agnostic (read more of this on 12-factor app methodology).

Folder Structure

To better understand how to work with Bedrock, first you should get to know it’s folder and file structure.

In the top level folder, we see a Composer file, Travis file, a gitignore file, a rulset.xml and wp-cli configuration.

Let’s start with the Travis file. If you’re using BitBucket or GitHub, you can link to your Travis CI setup to run tests that you have defined. In the case of the Bedrock Travis file, it pulls the code sniffer from PEAR, and uses the ruleset.xml to scan the files for code quality against some coding standards.

Everything is managed with Composer. Even the code WordPress script is installed by Composer. What is even more interesting is that this Composer configuration uses wpackagist as an additional repository. This is where the WordPress core files come from.

"wordpress-install-dir": "web/wp"

This is the line on the composer.json that defines where to put the WordPress files.

The wp-cli.yml (Wp-CLI) only specifies the WordPress directory:

path: web/wp

Vendor is the folder where every Composer package will be installed. However, the packages that come from wpackagist will be installed in different location. Will get to that later.

The web directory is where you’ll spend most of your time. This directory holds the wp and app folder.wp is where the big WordPress files stay, the app folder is where the plugins, themes and uploads will be located. Also, in composer.json, you’ll see the following configuration that installs the plugins and themes in this directory:

"installer-paths": {
   "web/app/mu-plugins/{$name}/": ["type:wordpress-muplugin"],
   "web/app/plugins/{$name}/": ["type:wordpress-plugin"],
   "web/app/themes/{$name}/": ["type:wordpress-theme"]
}

This way, you can keep everything very separate. .gitignore can also help you with this. The web/WP directory isn’t included in Git commits. Either is .env, because you should have a different one on your server. That’s because your database configuration is different (also any other configuration that you store there).

Last but not least is the configuration. If you have three different environments, let’s say dev, stagingand production, chances are that you want to have different configurations for each. In the config folder you’ll see that application.php has the most configuration that will be in common for the three environments. However, if you want to change a configuration, check the config/environments folder.

Things to Keep in Mind

I hope you’re now interested in Bedrock. I use Homestead because it’s a nice tool and also I’m familiar with it. Before you go, please check out Trellis. The nice thing about Roots.io is that they’ve developed a range of products from Sage the starter theme, to Trellis that can setup a whole server you. Every product fits and works really well together.