Welcome to this lesson about the WordPress theme configuration file theme.json and some of the available options for theme Settings.
With this lesson, you will:
- discover what theme Settings are for,
- explore the Settings available to end users, and
- use theme.json to control available Settings.
What are theme settings for?
Start by taking a look at the theme.json file that comes with WordPress Core. This is where all of the default settings are set up.
What settings are available to end users?
To answer that question, we need to note that there is a loading hierarchy. We start off with WordPress Core. Then we move up to Theme. Next, we have Child Theme if it’s available and active. And finally, we have the User Configurations.
Whatever a user does within the block or site editor and saves those changes, they will take priority over everything else in the hierarchy.
Using theme.json to control available settings
We’ll start off by opening up a template within the site editor and then we’ll go in and we’ll make some changes to the site and blocks specifically. If you open up Styles, you can see under Colors for example, we’ve got Text and here we can apply different colors to the text and this is Site Wide.
If we want to work with a block, we select the block and then we go into Settings and then the Styles tab within Settings. You’ll see Color and you choose Text and from there you can change the color of the text but note that we can’t change the color of links. In order to do that, we need to work within theme.json.
We’ve got the property Appearance Tools and that is by default set to False. Essentially, Appearance Tools is an all-encompassing property. It has all of these properties set to False by default from WordPress. If we are developing our theme and we want to, for example, enable all of these, we would just put True for Appearance Tools but for our example, we’re just going to work with the ability to change the color of links.
Under Appearance Tools, we’ll add the property Color and then we’ll enter Link and instead of False, we switch it to True and then Save. Now if we go back to WordPress and reload, now this time we should have the ability to change the color of links.
Site-wide under Colors, we now see the link option and if we select a block and we go into Block Settings under Color, we now have the link option.
Next steps
This concludes a brief overview of settings for WordPress themes. You can always refer to the theme handbook on WordPress.org and take a look at the settings reference in order to get a better idea of which settings you can configure within your theme.json file.