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
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
Creating a server side rendered Gutenberg block
Learn how to create your first ‘Hello World’ server side block. Adding dynamic content to your block theme with ease.
Admin styles and scripts
Adding custom styles to WordPress Gutenberg blocks is easy and at the same time extremely useful when developing your website.