One of the best features of WordPress Full Site Editing (FSE) is the theme.json file. It can be used to easily add styles to your theme, and some of the styles will work with classic themes too.
Currently you can add a palette of colors or change theme font sizes in classic themes. Normally in classic themes, you use PHP to add color choices and font sizes. And then once they’ve been added to the theme, you need to add styles for both the front and admin sides of the theme. Using a theme.json file, the styles are automatically added to the stylesheet by WordPress, so there is no need to write additional CSS.
To add more styles, such as set content widths or change block styles, you will need to use a Full Site Editing theme with the Gutenberg plugin activated, although this could change when WordPress 5.9 is released.
So let’s create a theme.json with a color palette and font-sizes.
First, you want to create a new file in your theme folder and name it theme.json in a text editor or code editor. I like using VS Code, as it points out any mistakes I make, but a text editor will work too.
These are the sections to add to the theme.json. Note that you must have a version number at the top of your file. Currently it’s 1. You can find out the latest version in Global Settings and Styles (theme.json) of the WordPress Block Editor Handbook.
{
"version": 1,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}The remaining sections can be in any order. Note that each section ends with a comma, except for the last section. This is true for any section that you add to your theme.json. You don’t want any trailing commas in a json file.
The color palette and font-sizes go in the “settings” section.
{
"version": 1,
"settings": {
"color": {
"custom": true,
"customDuotone": true,
"customGradient": true,
"link": false,
"duotone": [],
"gradients": [],
"palette": []
}
},
"styles": {},
"customTemplates": {},
"templateParts": {}
}For the color palette, you can add a “color” section inside the “settings” section. Adding a palette won’t automatically change the colors your theme uses; it will just make it easy to use these colors going forward – whether you use them in the Editor or if use them to style other parts of your theme.
The lines marked “true” or “false” in the “color” section let you to decide if you want to allow adding custom colors, duotones, gradients, or links. These are the default values, and are not really needed, unless you want to change them.
If you don’t want an end-user to be able to edit these colors, you would set them to false.
Add Colors to the Palette Section
Next we’re going to add colors to the “palette” section below “colors” which is below “settings”.
These colors are taken from the new Twenty Twenty-Two theme which will be final in WordPress 5.9.
{
"version": 1,
"settings": {
"color": {
"custom": true,
"customDuotone": true,
"customGradient": true,
"link": false,
"duotone": [],
"gradients": [],
"palette": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#ffe2c7",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#f6f6f6",
"name": "Tertiary"
}
]
}
},
"styles": {},
"customTemplates": {},
"templateParts": {}
}You will want to note that there is no comma after the curly brackets after the Tertiary color section and the square brackets for the palette section. Again this is because they’re the last of that type of section in the theme.json file.
The color names can be anything you like, but it looks like WordPress (in Twenty Twenty-Two) has adopted the color naming scheme recommended by Rich Tabor. The reason for using more generic terms for colors is to make it easier to change themes later on.
Each color needs three lines – slug, color, and name.
slug– Any slug can be used, all lower case with dashes, if needed.color– HTML colors in HEX format.name– This is a descriptive name that the user sees when hovering over the color.
CSS Color Styles Added
The following style variables are added as inline styles in the <head> section of all pages and posts. Your visitors will see these when you add them to Blocks in the Block Editor. All palette styles start with --wp--preset--color-- and end with the slug.
body {
--wp--preset--color--foreground: #000000;
--wp--preset--color--background: #ffffff;
--wp--preset--color--primary: #1a4548;
--wp--preset--color--secondary: #ffe2c7;
--wp--preset--color--tertiary: #f6f6f6;
}WordPress will add these styles to your content whenever you use the colors in the Editor.
Use the Color Variables in your Theme
If you want to use the color variables to style existing elements in your theme, you can add some CSS to Appearance > Customize > Additional CSS.
For instance, if you want to change your theme h2 color, you would add either of these to Additional CSS:
h2 {
color: var(--wp--preset--color--primary);
}OR
h2 {
color: #1a4548;
}Add Font Sizes to the Typography Section
You can also add a Typography section to the Settings section just below the Color section. You can see that you also have the choice to all users to choose custom font sizes, custom line heights, and whether to allow drop caps, just as before. Note that you should always have a font-size of “normal”.
{
"version": 1,
"settings": {
"color": {
"custom": true,
"customDuotone": true,
"customGradient": true,
"link": false,
"duotone": [],
"gradients": [],
"palette": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#ffe2c7",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#f6f6f6",
"name": "Tertiary"
}
]
},
"typography": {
"customFontSize": true,
"customLineHeight": false,
"dropCap": true,
"fontSizes": [
{
"name": "Small",
"size": "16px",
"slug": "small"
},
{
"name": "Normal",
"size": "18px",
"slug": "normal"
},
{
"name": "Medium",
"size": "28px",
"slug": "medium"
},
{
"name": "Large",
"size": "32px",
"slug": "large"
},
{
"name": "Huge",
"size": "48px",
"slug": "huge"
}
]
}
},
"styles": {},
"customTemplates": {},
"templateParts": {}
}
Note that because we added the typography section below the palette section, there is now a comma after the palette section, but not the typography section.
slug– Any slug can be used, all lower case with dashes, if needed.size– These font sizes use “px”, but you can use “rem” or “em” .name– This is a descriptive name that the user sees when hovering over the font size.
CSS Font Size Styles Added
Again style variables are added as inline styles in the <head> section of all pages and posts. Font size styles start with --wp--preset--font-size-- and end with the slug.
body {
--wp--preset--font-size--small: 16px;
--wp--preset--font-size--normal: 18px;
--wp--preset--font-size--medium: 28px;
--wp--preset--font-size--large: 32px;
--wp--preset--font-size--huge: 48px;
}WordPress will add these styles to your content whenever you choose these font sizes in the Editor.
Use the Font Size Variables in your Theme
If you want to use the font size variables to style existing elements in your theme, you can again add some CSS to the Additional CSS section in the Customzier.
For instance, if you want to change your theme h2 font-size, you would add either of these to Additional CSS:
h2 {
font-size: var(--wp--preset--font-size--large);
}OR
h2 {
font-size: 32px;
}I find using a theme.json file for adding color and font-size files to themes to be much easier than using PHP, and will add one to most classic themes going forward.
What do you think?
Leave a Reply