theme.json in Classic themes

Welcome to this lesson which explores the option of adding the theme.json file to a classic theme.

What are the benefits of having theme.json added to a classic theme?

Here we have Twenty Twenty-One as the currently active theme. We’ll take a look at some of the settings and styles that are available to the end user by opening up a page. We’ll open the sample page.

If we select a block and go over to the right side here, we see there’s text and typography settings and styles available. With theme.json, we can gain control over those settings and styles.

For example, you could choose to disable color support for the heading block. Here you’re looking at the code you would add to theme.json in order to disable color support for the heading block.

{
    "version": 3,
    "settings": {
        "blocks": {
            "core/heading": {
                "color": {
                    "text": false,
                    "background": false,
                    "link": false
                }
            }
        }
    }
}

Adding theme.json

Let’s now take a look at adding theme.json to a classic theme. Let’s add theme.json to the Twenty Twenty-One theme. And all we need to get started is the schema and the version.

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3
}

To learn more about adding theme.json to a theme, do check out the Global settings and styles lesson available within the Beginner WordPress developer learning pathway.

If we go back into WordPress now and reload the page, we see that the layout has shifted. This is because the theme.json that ships with WordPress is now activated.

To resolve this issue, go back into theme.json and add the settings for the content size.

Add 650px and save those changes, then go back into WordPress and reload again.

   "settings": {
    "layout": {
        "contentSize": "650px"
    }
   }

If you want to see all of the settings within theme.json of WordPress core, you can find it within the ‘wp-includes/theme.json’ folder.

Next steps

If you would like to learn more about theme.json, you can take a look at the block editor handbook available to you on WordPress.org.