What is the theme.json in WordPress Full Site Editing?
Full Site Editing (FSE) is a new and exciting feature in WordPress that lets you create and manage the entire look and feel of your website using blocks, just like you would on a post or page. The theme.json
file is a crucial component of FSE, as it defines the structure and layout of your site and controls the appearance of your blocks.
The blueprint of your website
Think of the theme.json
file as the blueprint for your website. It tells WordPress which templates to use for your header, footer, archive pages, single post pages, and more. It also defines the styles and behaviors of your blocks, such as colors, fonts, and padding.
Here’s a minimal example of what a theme.json
file might look like:
{
"version": "1.0.0",
"name": "My FSE Theme",
"scripts": [ "index.js" ],
"globalStyles": [ "style.css" ],
"templates": [
{
"slug": "front-page",
"title": "Home",
"template": "template-parts/front-page.php"
}
],
"blockStyles": [
{
"blockName": "core/paragraph",
"styles": [ "style.css" ]
}
],
"editorStyles": [
"editor-style.css"
],
"support": {
"responsive": true,
"alignWide": true
}
}
In this example, the version
, name
, and scripts
properties define basic information about the theme. The globalStyles
property defines a stylesheet that will be applied site-wide. The templates
property defines the templates that will be used for different pages on the site, such as the front page. The blockStyles
property defines styles that will be applied to specific blocks, and the editorStyles
property defines styles that will be used in the editor. The support
property defines features that the theme supports, such as responsive design and wide alignment.
Resources to learn more
Getting started with the theme.json
file and Full Site Editing is easy, even if you have no prior experience with coding. The WordPress team has created a helpful video tutorial that takes you step by step through the process of setting up a theme.json
file for your website: https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/full-site-editing/.
Additionally, there is a wealth of documentation available on the WordPress website: https://developer.wordpress.org/block-editor/developers/themes/full-site-editing/.
There are also Full Site Editing examples and templates available on GitHub:
https://github.com/WordPress/gutenberg-examples/
With these resources at your fingertips, you’ll be well on your way to creating beautiful and functional websites with WordPress and the theme.json
file!
More tutorials
How to use multiple post types in a Query Loop Block
Currently the Query Loop only supports one post type. In this article we will show how we add multiple post types to…
Read more How to use multiple post types in a Query Loop Block
How to add filters and search to the WordPress Query Loop Block
It has been a pain to add filters and search to your feeds in Gutenberg. Not any more, we will teach you…
Read more How to add filters and search to the WordPress Query Loop Block
Learn Gutenberg block building – Create a block that renders an ACF field
With this tutorial, you’ll learn how to create a custom Gutenberg block that displays an ACF field on the front-end of your…
Read more Learn Gutenberg block building – Create a block that renders an ACF field