welcome to this lesson
where we will explore global settings and styles
for WordPress
with this lesson
you will describe the purpose of a WordPress Themes
theme.json file
familiarize yourself with the JSON format
and the structure of theme.json
and understand the hierarchy used for loading
the setting and style configurations of a website
so let's dive in.
so why does a WordPress theme need a theme.json file?
theme.json is the configuration file for a theme.
previously, theme developers would have used the customizer
to build out features for end users
within their classic themes.
here for example we have the Classic Theme TwentyTwentyOne
and in this theme we would have
found the settings for colors
and widgets within the customizer.
so everything gets built out here on the left
and this is how end users work with the theme
now with modern WordPress
we have block themes
and theme developers can now use theme.json
to provide those features to end users.
so this provides a more consistent way of
presenting features
now here within the Site Editor
you can see the possibilities
for the settings and styles that you can include
in your theme.
let's take a step back now
and take a look at the JSON format
and the structure of theme.json
JSON stands for Javascript Object Notation.
JSON is essentially a data representation format.
it's used for configuration files.
it's a common format for
sending and requesting data through a REST API
and it's lightweight and easy to read.
now the supported data types are strings, numbers, floats,
booleans, arrays and objects.
with arrays,
we always use a numeric index as we understand it
and PHP as we see in this example here.
and for objects we use a key/value pair
as this example here illustrates.
this is a list of quotes from West World.
you can see the key value format I was just mentioning.
another thing to note is the key is always a string.
in a code editor,
you'll have these breadcrumbs here at the top
and this is helpful for quickly navigating.
here I am sitting at the first quote for Bernard Lowe
and so you can see that here as an array item.
another thing to note is with JSON,
it's particularly picky about commas.
so if I remove that comma,
I get an error message.
here we have the theme.json
file for the default theme 2024
and we've got these properties I'm going to go over now.
so first is schema.
and that's used for defining the support of JSON.
and this is why we get the on the fly hints
and error reporting.
the next property is version and we're at 2
and you can always find this as a living reference on
WordPress.org
and it gives you the most up to date properties
you can set. next we have the settings.
settings is used to define your block controls,
color palettes, font sizes and so on.
under that, we've got the styles property
and that is used to apply items such as colors,
font sizes,
custom CSS and that's applied to the website and blocks.
under styles, we have template parts
and that is metadata for template parts
defined in your themes parts folder.
next we have custom templates
that's metadata for custom templates
defined in your themes templates folder.
and finally we have patterns
and this is a comma separated list of slugs
to be registered from the pattern directory
available to us on WordPress.org
let's now take a look at the hierarchy used for loading
the setting and style configurations of a website.
the theme.json file
included in your theme is only one level
in a hierarchy of setting and style configurations
for a website.
now this means that it can be overwritten
under certain circumstances.
so I'm going to walk you through from lowest to highest
the priority of this hierarchy.
first we have WordPress.
so within the installation files
if you go to the wp-includes folder
you'll see theme.json there
and this file defines the default settings and styles.
next we have your theme's theme.json file
and anything you defined in that file will override the
WordPress defaults.
if you have a child theme that is active
and you have a theme.json file
included in your child theme,
then anything that you do here
will take precedence over the theme.json
file in the parent theme.
so for instance here,
I could set appearanceTools to false.
next we have the user configurations.
so within the site editor
any changes that are added to the database
through changes made to global styles
or even templates and saved,
this will override
and takes priority over all other levels
in the hierarchy.
so this concludes
the overview of global styles and settings.
much more detailed information is available
within the Intermediate Theme Developer Learning Pathway.
don't forget
you can also visit the theme.json Reference Guide
to further familiarize yourself with the JSON schema.