Now that Full Site Editing (FSE) is planned for the next release of WordPress, I figured now is a good a time as any to learn how it works in order to make a useable theme.
I’ve been fiddling with FSE for almost a year, but with the 5.8 release making theme.json available to be used in a non-FSE theme, I think it’s ready.
File and folder structure
The theme file structure is a but different from classic themes. Instead of a lot of PHP and CSS files, most of the configuration is in HTML files and the theme.json file. Here’s a sample structure:
- /block-template-parts/
- — header.html
- — footer.html
- /block-templates
- — index.html
- — single.html
- — archive.html
- functions.php
- index.php
- style.css
- theme.json
Similarities and differences
- block-templates and block-template-parts are analogous to the older template-parts and root folder of older themes.
- functions.php doesn’t require more than some basic theme setup, the same as in older themes.
- index.php is a required file but can be completely empty, as the WordPress loop is actually located in the block-templates/index.html.
- style.css likewise needs to be there with the same comments at the top as classic themes, but much of the styles can be set using theme.json.
The confusing part
Figuring out how theme.json works is still something I’m struggling with, but I’m getting to where I think I can make something I’ve wanted to make for awhile: a series of WordPress themes that mimic the look and feel of Hercules, CGA and EGA colors from decades ago.
Next time, I’ll explain what I’ve got on my theme.json file and hopefully it will help you with your development.