DEV Community

Cover image for A headless & more secure WordPress install with Bedrock
Markus
Markus

Posted on

A headless & more secure WordPress install with Bedrock

The foundations of WordPress (WP) haven't changed much in a long time. Sure Gutenberg has changed a lot of things on the frontend, but not much has changed in the way you setup + install WordPress. This predictability is great for their famous 5-minute install, but their lack of support for package tools like Composer, is sorely missed by developers these days.

Enter Bedrock

What is Bedrock? Well if you'd asked me a year ago, I'd have said a really killer rave track from the '90s. But more recently, to me, Bedrock is the new defacto boilerplate for working with WordPress.

Bedrock is a project by Roots that in short,

  • Improves the WordPress folder structure
  • Adds full Composer support for dependency management
  • Supports multi-stage environments through Dotenv
  • Enhances security by moving the WP core outside of the web root, and by making use of bcrypt hashed passwords instead of MD5.

Installation

Installation is pretty complex. Bare with me...

composer create-project roots/bedrock

Did you survive that ordeal? ๐Ÿ˜‰

This will download Bedrock and install a few core dependencies via Composer. Once that's done, open your folder in your editor of choice and you'll see an .env file ready for editing. Update all the things and then you should be good to go.

gif of 2 men, one saying 'that was easy'

A few things to note:

  1. Your 'root' is now the ./web/ folder. Things here will look a little different, as Bedrock cleverly abstracts everything into new locations.
  2. Because of this new location, you'll need to set up your MAMP root to be this folder, not the project root. Otherwise, if you're using nginx, set your root to be this folder.
  3. Everything you're looking for - themes, plugins, uploads, etc - can be found in ./web/app.

Nice.

PSA: Here's a simple repo with Docker baked into it, that you can use for local development. I'm new to Docker, so this might not be a perfect solution, but I use it regularly for my projects and so far, so good.

Plugins

There are a few plugins we'll be using to manage our website's content. Thanks to the joys of Bedrock, we can use Composer to install these:

composer require wpackagist-plugin/advanced-custom-fields
composer require wpackagist-plugin/acf-to-rest-api
Enter fullscreen mode Exit fullscreen mode

Advanced Custom Fields requires no introduction. ACF-to-REST API, simply takes all your ACF data and dumps it into an acf object within your REST data. So for example, if you have a field called sub_title, this will be available in mypost.acf.sub_title.

Lovely.

Theme

Our site is gonna be a 'headless' site, so we don't require a theme. We will, however, be adding a few bits & pieces of custom code to extend some REST endpoints, so for that, we can create the bare minimum of a WordPress theme:

Simply make a folder ./web/app/themes/my-rest-site (or whatever you want to call it) and add an index.php, functions.php and style.css.

We'll circle back to this later as we get to step 2.


And that's that. You now have a Bedrock-powered WordPress site that's ready to be used as our CMS for our Gatsby site.

Have you used Bedrock before? Do you have any tips for how you've made it work for your projects? I'm keen to hear all about it in the comments below.


Next up, we'll be covering how to add custom data into our REST endpoint, and how to use WPGraphQL to graphql-ify our site.

Top comments (3)

Collapse
 
eppu profile image
Eetu Eskelinen

Awesome! Waiting for the next part already ๐Ÿ‘

Collapse
 
bzx profile image
Tom Cvak

Actually, Bedrock does not move WP core outsite of web root โ€“ web root points to the ./web directory which holds your WP core directory (/wp) as well as the actual Bedrock directory (/app) which contains the main configuration of your app and the theme assets.

Collapse
 
shainegordon profile image
Shaine Gordon

Where is part 3 :)