How to setup Bedrock for your WordPress Work Environment

Modern WordPress Workflow

In this tutorial I will show you my solution for a quick and easy way to setup and configure Bedrock by roots to use as a base for your WordPress projects.

Bedrock is the modern way to install, configure and manage WordPress for a much more pleasant development experience in my opinion and of course many others. With it’s greatly liked folder structure added security and best practices in mind. Below I will show you they way I have installed it for my current workflow.

Quick and Easy Setup

First you will need some programs installed:
1. Composer
2. Nodejs
3. Yarn
4. Git
5. VS Code

You might find a lot of different ways on the internet to setup your work environment with bedrock and WordPress but in this tutorial I will show you mine, I am using a windows 10 operating system and once configured it’s a one click process.

The Host Laragon for Bedrock

step 1. Download Laragon it’s perfect for PHP, Laravel, WordPress, Drupal, Symfony developers. Has a one click workflow gets you up and running FAST!

step 2. To open Laragon right click on the window anywhere to open the menu, go to Quick app > Configuration add this line

WordPress BedRock=composer create-project roots/bedrock %s

This adds a new tab in Quick app called “WordPress Bedrock”

step 3. Now click on your new tab in Quick app > WordPress Bedrock to start your new WordPress Bedrock project.
It will prompt you to add the project name. I will call my project bedrockapp

Project Name [WordPress BedRock]:

*Note: the database will be named the same.

This will open your CMD and start uploading all the necessary files for a WordPress Bedrock project.

step 4. Next open your new project in code editor and then navigate to the .env file and configure your environment variables:

DB_NAME=bedrockapp
DB_USER=root
DB_PASSWORD=
 
WP_ENV=development
WP_HOME=http://bedrockapp.test
WP_SITEURL=${WP_HOME}/wp

Bedrock WordPress Sage Theme Setup

In this tutorial I will be installing the sage starter theme by roots. Otherwise you could add any theme within the web/app/themes folder as normal.

step 5. In your code editor project files open your command line tool, navigate to the web/app/themes folder and add this line:

$ composer create-project roots/sage bedrockapp

Here composer will add a new project called bedrockapp

step 6. From the command line navigate to your theme directory and run yarn

@myPC- themes/bedrockapp/
$ yarn

step 7. Navigate in your themes/bedrockapp/resources/assets/config.json and configure browser sync to point to your “devUrl”:

{
  "entry": {
    "main": ["./scripts/main.js", "./styles/main.scss"],
    "customizer": ["./scripts/customizer.js"]
  },
  "publicPath": "/app/themes/sage",
  "devUrl": "http://bedrockapp.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": ["app/**/*.php", "config/**/*.php", "resources/views/**/*.php"]
}

Next, navigate to your devUrl http://bedrockapp.test and install WordPress as normal then under Appearance active sage starter theme.
*Note: To access your admin your devUrl http://bedrockapp.test /wp/wp-admin/

Test your Browser Sync with Sage Theme

Once your theme is activated, in your code editor navigate to your theme and start the sever with yarn start

@myPC- themes/bedrockapp/
$ yarn start

open http://localhost:3000/
now in your code editor navigate to themes>bedrockapp>resources>assets>common>_global.scss
and test it out

body {
  background-color: red;
}

Recap WordPress Bedrock and Sage starter theme

Now you are all set with your new modern workflow using Bedrock and Sage for your new WordPress projects. Hope you got something out of this tutorial, this is a great modern workflow for WordPress and has some great benefits, awesome new folder structure (bedrock), staging environments (bedrock), webpack compiled assets for fast optimized websites (sage), blade tempting (sage), nicer folder structure (sage). MVC architecture (sage). Start creating and build awesome projects for your clients using Bedrock and the awesome Sage starter theme by roots.

Thanks for visiting eWebDesigns! and till next time, adios amigos!