Theme.json Cheat Sheet
A quick reference for the most common configurations in theme.json (Version 3).
1. Top Level Structure
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": { ... }, // Configuration (Palette, Fonts, Flags)
"styles": { ... }, // CSS Output (Root, Elements, Blocks)
"customTemplates": [], // Register templates for Page Editor
"patterns": [] // Register pattern slugs from directory
}2. Common Settings Keys
These control the editor UI and generate CSS variables.
Global Toggles
"settings": {
"appearanceTools": true, // Unlocks border, radius, margin, padding, etc.
"useRootPaddingAwareAlignments": true // Adds padding to full-width groups
}Color Palette
Generates: --wp--preset--color--{slug}
"settings": {
"color": {
"defaultPalette": false, // Disable Core colors
"palette": [
{ "slug": "primary", "color": "#000000", "name": "Primary" },
{ "slug": "accent", "color": "#ff0000", "name": "Accent" }
]
}
}Typography
Generates: --wp--preset--font-size--{slug} & --wp--preset--font-family--{slug}
"settings": {
"typography": {
"fontSizes": [
{ "slug": "small", "size": "0.9rem", "name": "Small" },
{ "slug": "h1", "size": "clamp(2rem, 5vw, 4rem)", "name": "Heading 1" }
],
"fontFamilies": [
{ "slug": "sans", "fontFamily": "Inter, sans-serif", "name": "Inter" }
]
}
}Layout (Content Width)
Controls the "Wide" and "Content" width settings in blocks.
"settings": {
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
}
}3. Common Styles Keys
These apply CSS to the site.
Global Elements
Target HTML tags globally.
"styles": {
"elements": {
"h1": { "typography": { "fontSize": "var(--wp--preset--font-size--h-1)" } },
"link": { "color": { "text": "var(--wp--preset--color--primary)" } },
"button": { "border": { "radius": "0px" } }
}
}Block Specifics
Target specific blocks by name.
"styles": {
"blocks": {
"core/navigation": {
"typography": { "fontSize": "var(--wp--preset--font-size--small)" }
},
"core/group": {
"spacing": { "padding": { "top": "var(--wp--preset--spacing--50)" } }
}
}
}4. Useful Variable References
- Color:
var(--wp--preset--color--slug) - Font Size:
var(--wp--preset--font-size--slug) - Spacing:
var(--wp--preset--spacing--slug) - Font Family:
var(--wp--preset--font-family--slug)