February 11, 2023

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!