---
tags:
  - wordpress
  - fse
  - theme.json
  - reference
  - cheat-sheet
title: Theme.json Cheat Sheet
---

# Theme.json Cheat Sheet

A quick reference for the most common configurations in `theme.json` (Version 3).

## 1. Top Level Structure

```json
{
    "$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
```json
"settings": {
    "appearanceTools": true,      // Unlocks border, radius, margin, padding, etc.
    "useRootPaddingAwareAlignments": true // Adds padding to full-width groups
}
```

### Color Palette
Generates: `--wp--preset--color--{slug}`
```json
"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}`
```json
"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.
```json
"settings": {
    "layout": {
        "contentSize": "800px",
        "wideSize": "1200px"
    }
}
```

## 3. Common Styles Keys

These apply CSS to the site.

### Global Elements
Target HTML tags globally.
```json
"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.
```json
"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)`