Create a Block Theme for WordPress Quickly with the Terre Framework

I’ve been experimenting the past couple months with a variety of strategies of how to create a block themes for WordPress.

Terre is a free base theme that is the culmination of these experiments. I hope it will prove a useful starter for other developers interested in building themes that take advantage of full site editing within WordPress.

What you can build with Terre

Terre is an unopinionated starter theme that sets up some base styles and functionality, but adapts into just about any style you need. In fact, I built this site as a custom child theme to Terre.

In addition to the alpha version of Terre, I’m releasing a few example child themes to show how to get started building your own:

About the theme

There is a lot of debate in the community about where parent/child themes are still relevant with full site editing. I believe that long term they will not be relevant to most users. That said, I do think a parent base theme is still a good way to manage features that you can use across multiple sites.

This is how Terre is setup. The Terre base theme is extremely bare bones by design. It is meant to act as a parent theme that sets up some standard features (like fluid spacing and typography) and establishes a variable naming convention.

Then, you can create child themes that selectively override parts of the theme.json file to build out a theme without worrying about setting up everything from scratch.

This way if WordPress rolls out new features available for the theme.json file you can just opt in within the parent theme and distribute it across your various installs without necessarily needing to update every theme for each site you manage.

That said, if you prefer not to use a child theme setup, you can always use Terre simply as a boilerplate starter like underscores. In this case, you simply customize and templates and add patterns directly in the Terre theme. This has the advantage of a simpler setup and is likely a better option for those not managing multiple sites.

Features of the Terre Theme Framework

I’ve tried to include a reasonable amount of features within the base theme to make Terre easy to pick up and get running with.

The setup is inspired by Brian Gardner’s Frost theme and includes:

• Fluid spacing presets using t-shirt size naming conventions
• Fluid typography presets using t-shirt size naming conventions
• A starter color palette following the convention outlined by Rich Tabor here
• A custom base sizing and base rounding attribute that can be used to quickly change spacing and rounding of buttons etc across the board
• A starter css file that provides some resets for core blocks etc.
• Header, Footer, and Comment template parts
• Editor.js file that allows easy registration/unregistration of block styles

If you are new to full site editing a recommend taking a look at how the theme.json file works before diving into Terre.

Terre intentionally includes only minimal patterns. You can add patterns in a child theme or extend Terre with your own patterns without needing to override a bunch of pre-existing ones.

Build block themes with Terre now

Ready to check out the starter?

You can grab the Terre starter as well as two example starter child themes on Github.

---

Terre Base Theme | Slate Child Theme | Calcite Child Theme

---

Please note: All themes are in an early alpha version. Changes will likely be coming down the pipeline soon, especially with new versions of WordPress coming this month.