WordPress
Article

Modern WordPress Development with Bedrock

By Aleksander Koko

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.

Bedrock

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 called Homestead. 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:

Bedrock 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.app and 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<kj:i@|a2gT&K`WZwJZ?o=S?yd~d1huGv=7]i5q%Ia02mm'
LOGGED_IN_KEY='N=*D115ejwdp|6g]KLiggtg4@`<Nl.g9n1F*@HV<!.8WqJC#u(?8-eW91RI~r6kD'
NONCE_KEY='XIRn1WSc4d=3VM!,7DyC;dF2S-KRuf/2GqNtO-Le=x5P<8+~=.|{+C47@!1Bh/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)ScK:5@_TI=`k;'
NONCE_SALT='EMtD>gE l)!u+:QW ;$hf2B0^NTV-])?>_6T6Iv=S*LOuzL&+n|P]{hZ]<0Jg-`b'

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, staging and 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.

What do you think about Bedrock? Please leave your comment below.

  • https://awontis.com/ Dan Awontis

    Thank you for the article. I’ll get back to you as soon as I try it.

    • Maria Duckworth

      Get 7500 to 14000 dollars a month online.Even newbies can have more than dollars 58 h..hl All you just Need an Internet Connection and a Computer To Make Some Extra cash.

      http://www.coronaville.ME.LY
      hgh…

  • Aleksander Koko

    You can also do that :) . Thanks

  • http://www.cygnet-infotech.com/ Hemang Rindani

    WordPress is an amazing enterprise web content management services that makes the web development easier with its built-in tools. If you browse through WP, you will find that there are tools for every occasion that can never be the case with other solutions like Sitefinity CMS, Drupal or Sitecore and thus it has gained popularity. Bedrock is an exciting custom web building tool which can create good looking web pages, however with the experience, I suggest that using built-in themes will be a better way create a website. This will ensure consistency and will help in lessening the designing time.

    • Aleksander Koko

      What we value the most in an ecosystem is kind of personal viewpoint. I am keen on clean environments, a predefined structure that is also flexible. If you some things in mind that you want to write here in Sitepoint let me know (your experience and what you value in this ecosystem)

  • http://exclusive-paper.com JanySmool

    Hello, it is very professional artical! Thank you very much for this advice! Can you tell me, what is the advantages of bedrok!?

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in WordPress, once a week, for free.