Introducing Elementary, rtCamp’s block-based starter theme

WordPress introduced FSE (Full Site Editing) with its core 5.9, at the end of January 2022, empowering developers with the choice to move from traditional PHP template based to the new block-based themes.

As PHP-based themes have been around for a while, the WordPress ecosystem has base themes to help developers get started with a traditional theme. To facilitate a headstart for developing the relatively new block-based themes, we at rtCamp developed ‘Elementary’. Here are some of its main features –

• Quick start to initializing the theme
• Ready to use boilerplate code for all the FSE features
• Provides asset building and testing framework by default
• Follows WordPress coding standards

Here’s why you would want to use Elementary as the base for getting started with your block theme development:

1. It is regularly updated with the latest FSE features being introduced. Which means you’ll be able to find the latest features in action through the theme.
2. It has an in-built ‘Theme setup’ script, which is an interactive script that helps you personalize the theme to your requirements.
3. To ensure better performance, it demonstrates modularizing and loading styles only as required on a page.

Additionally, Elementary also comes bundled with a bunch of developer-friendly features.

Getting started

Single command setup

Setting up Elementary is as simple as it gets – run this single composer command.

composer create-project rtcamp/elementary [folder_name]

The command will clone the repository at the specified folder name, and automatically install the required dependencies. It will also trigger a script to help you set up various aspects of the theme, based on the questions you answer. Once you have the base setup, you will need to build assets on your local machine since built assets aren’t a part of the version control. For further information, you can visit the development section of the project readme.

Boilerplate code for custom features

The theme provides you with boilerplate code which comes in handy while building new custom features. It includes,

• Asset building
• Block templates and template parts
• Global styles presets
• Testing frameworks setup for PHP(using PHPUnit) and JS(using Jest)

theme.json file

The theme.json file is one of the most fundamental elements of a block theme that helps configure and customize the WordPress editorial experience. Elementary ensures that the theme.json file has enough sample configuration for a developer to begin with, and later configure it to their requirements.

Installation and usage

Using Elementary is quite simple, as suggested above, where the “Single command setup” takes care of everything required to get started with building your custom block theme.

The command will take a few moments while it loads all the necessary dependencies. Once done, you’ll be presented with a question, “Would you like to setup the theme? (y/n)”. If you reply positively, you’ll be prompted with another question asking you to provide the theme name. You’ll then be presented with the necessary theme details, and once you approve, the script does the necessary search-replacing in the theme content.

Conclusion

We set out to create Elementary to help developers get started with block themes effortlessly, and explore FSE to its fullest potential. You can directly contribute to our ever-evolving project or drop your suggestions and thoughts using the GitHub issues.

Links: Theme Elementary | Packagist | We’re Hiring!