First Project Using the Roots Suite

We’ll start this series by explaining how to install a WordPress site using the suite of products offered by Roots.

For this series, we’ll imagine that we’re developing the website for a fictional agency called “El Faro”.

The goal is to get a high-level overview of the three main products. Trellis, Bedrock, and Sage, and understand what role each one plays in the process.

Requirements

• Basic knowledge of WordPress
• Ideally macOS, although it’s possible to adapt the requirements for Windows by following this guide.

Introduction

Roots brings best practices from other software ecosystems into WordPress. The project started in 2011 and is one of the most popular within the community.

Trellis

These are the main features of Trellis:

– Environment parity

Trellis allows you to create identical development, staging, and production environments. This is extremely useful because it ensures that what you see locally or in staging will match what you see in production. Same PHP version, same Nginx setup, and so on.

– Automatic server provisioning

Through Ansible, Trellis enables automatic server configuration. We’ll cover this in more detail in a future post.

– One-command deployments

Trellis works with atomic deployments, allowing you to deploy changes with zero downtime using a single command.

– Trellis CLI

For server provisioning, deployments, generating .env files (which we’ll see later), and many other features, Trellis relies on a command-line interface (CLI).

Bedrock

These are the main features of Bedrock:

– Dependency management with Composer

Thanks to Composer, the entire WordPress installation. including plugins. is defined in a composer.json file. This keeps the repository lightweight and easy to share with other developers collaborating on the project.

– Improved project structure

Bedrock organizes WordPress files in a way that’s similar to more modern applications. It also isolates sensitive files from the web root, providing much better security.

– Dotenv-based configuration files

Bedrock moves all configuration out of wp-config.php by using environment variables.

Sage

These are the main features of Sage:

– Blade templating

To follow the DRY principle (Don’t Repeat Yourself), Sage uses Blade templates (blade.php). This helps keep templates and files well organized.

– Modern workflow

By default, Sage lets you start working with Sass and ES6 thanks to its setup based on Webpack.

Project Creation

Let’s get into practice.

We create a folder with the project name and navigate into it. Ideally, the name should match the domain we want to associate with the project. In this case, elfaro.test.

mkdir elfaro
cd elfaro

1. Trellis installation

We clone Trellis and remove the Git reference.

# .
git clone git@github.com:roots/trellis.git && rm -rf trellis/.git

2. Bedrock installation

We install Bedrock using Composer. We could do something similar to the Trellis step if we wanted, but installing it via Composer automatically runs composer install.

# .
composer create-project roots/bedrock site

At this point, the project root will contain two folders: trellis and site.

3. .env generation

We’ll generate the WordPress configuration variables. Trellis allows us to generate a .env file based on .yml files.

We go to /trellis/group_vars/development/wordpress_sites.yml and replace the domain name with the one we want. There are many hidden options that can be modified and reviewed here: https://roots.io/docs/trellis/master/wordpress-sites/#normal-settings.

Once those values are defined, we can generate the .env file using the Trellis CLI. It will be created inside the site folder.

Summary

At this point, we have a fully functional WordPress project using the Roots stack. Trellis for infrastructure and deployments, Bedrock for project structure and dependency management, and Sage for modern theme development.