We use optional Google Analytics to understand which tools are useful and improve the site. Analytics stays off unless you accept. Privacy Policy

GetKineticHub Tools

WordPress theme.json Generator

Build, preview, validate and export a WordPress theme.json without memorizing the schema.

theme.json version 3 · schemas.wp.org/wp/7.1/theme.json

Starter document

No problems

Configuration

GeneralappearanceTools, root padding

Turns on the border, color, dimensions, position, spacing and typography controls WordPress keeps off by default.

Applies styles.spacing.padding to content, so full-width blocks can still reach the edges.

Layoutcontent and wide widths

The width of normal content.

The width of wide-aligned blocks.

Colorpalette, gradients

Colors

settings.color.palette Colors editors pick from. Any CSS color works.

Gradients

settings.color.gradients CSS gradients, such as linear-gradient(135deg, #2563eb 0%, #7c3aed 100%).

Typographyfont sizes, font families

WordPress turns font size presets into clamp() values that scale with the viewport.

Font sizes

settings.typography.fontSizes Sizes editors pick from. With fluid typography, WordPress computes a clamp() from each size unless you set min and max.

Font families

settings.typography.fontFamilies Font stacks. Add font faces for font files your theme ships.

Spacingspacing presets, units

Designing a complete spacing system? The WordPress Spacing System Generator builds native spacingScale or fluid clamp() presets with a live ladder. Import its output here.

units Units editors can type

Not set: WordPress offers all six.

Spacing sizes

settings.spacing.spacingSizes Sizes for padding, margin and block spacing. Blocks store a reference to the preset, so changing a preset's size changes every layout that already uses its slug.

Generated scale (spacingScale)

1 to 10; 0 turns it off.

WordPress generates presets 10 to 100 around Medium (50) from these five values and fills missing ones from its own scale.

Borderborder controls, radius presets

Radius sizes

settings.border.radiusSizes Radius sizes editors pick from.

Dimensionssize controls, dimension presets

Dimension sizes

settings.dimensions.dimensionSizes Widths and heights editors pick from.

    No dimension sizes yet. WordPress uses only its defaults, if any.

    Viewportbreakpoints for responsive styles

    Mobile styles apply up to this width. px, em or rem only.

    Tablet styles apply above mobile, up to this width. Must be larger than mobile.

    Left out, WordPress uses 480px and 782px. Set only one, and WordPress uses that one alone. There’s no desktop breakpoint: desktop is the base style.

    Otherlightbox, sticky position

    Opens images in a lightbox when clicked.

    Lets editors turn the lightbox on or off per image.

    Lets editors make Group blocks stick while scrolling.

    Live Theme Lab

    A preview model of your theme.json, not WordPress itself.

    Desktop: base styles.

    Fonts show if they’re installed on this device; font files aren’t loaded. Links and buttons show the state you’re editing in Styles.

    Diagnostics

    No problems found for WordPress 7.1.

    Output

    The complete file, with the selected target’s $schema. Everything imported is kept, including what this tool can’t edit.

    {
	"$schema": "https://schemas.wp.org/wp/7.1/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"useRootPaddingAwareAlignments": true,
		"layout": {
			"contentSize": "720px",
			"wideSize": "1200px"
		},
		"color": {
			"defaultPalette": false,
			"defaultGradients": false,
			"palette": [
				{
					"name": "Base",
					"slug": "base",
					"color": "#ffffff"
				},
				{
					"name": "Contrast",
					"slug": "contrast",
					"color": "#111827"
				},
				{
					"name": "Primary",
					"slug": "primary",
					"color": "#2563eb"
				},
				{
					"name": "Secondary",
					"slug": "secondary",
					"color": "#7c3aed"
				},
				{
					"name": "Muted",
					"slug": "muted",
					"color": "#f1f5f9"
				}
			],
			"gradients": [
				{
					"name": "Primary to secondary",
					"slug": "primary-to-secondary",
					"gradient": "linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)"
				}
			]
		},
		"typography": {
			"defaultFontSizes": false,
			"fontSizes": [
				{
					"name": "Small",
					"slug": "small",
					"size": "0.875rem"
				},
				{
					"name": "Medium",
					"slug": "medium",
					"size": "1rem"
				},
				{
					"name": "Large",
					"slug": "large",
					"size": "1.5rem"
				},
				{
					"name": "Extra large",
					"slug": "x-large",
					"size": "2.25rem"
				}
			],
			"fontFamilies": [
				{
					"name": "System sans",
					"slug": "system-sans",
					"fontFamily": "system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif"
				},
				{
					"name": "Serif",
					"slug": "serif",
					"fontFamily": "Georgia, \"Times New Roman\", serif"
				}
			]
		},
		"spacing": {
			"defaultSpacingSizes": false,
			"spacingSizes": [
				{
					"name": "Small",
					"slug": "20",
					"size": "0.5rem"
				},
				{
					"name": "Medium",
					"slug": "30",
					"size": "1rem"
				},
				{
					"name": "Large",
					"slug": "40",
					"size": "1.5rem"
				},
				{
					"name": "X-Large",
					"slug": "50",
					"size": "2.5rem"
				}
			]
		},
		"border": {
			"radiusSizes": [
				{
					"name": "Small",
					"slug": "sm",
					"size": "4px"
				},
				{
					"name": "Medium",
					"slug": "md",
					"size": "8px"
				},
				{
					"name": "Large",
					"slug": "lg",
					"size": "16px"
				}
			]
		}
	},
	"styles": {
		"color": {
			"background": "var:preset|color|base",
			"text": "var:preset|color|contrast"
		},
		"typography": {
			"fontFamily": "var:preset|font-family|system-sans",
			"fontSize": "var:preset|font-size|medium",
			"lineHeight": "1.6"
		},
		"spacing": {
			"padding": {
				"top": "0",
				"right": "var:preset|spacing|40",
				"bottom": "0",
				"left": "var:preset|spacing|40"
			},
			"blockGap": "var:preset|spacing|40"
		},
		"elements": {
			"link": {
				"color": {
					"text": "var:preset|color|primary"
				},
				":hover": {
					"color": {
						"text": "var:preset|color|secondary"
					}
				}
			},
			"button": {
				"color": {
					"background": "var:preset|color|primary",
					"text": "var:preset|color|base"
				},
				":hover": {
					"color": {
						"background": "var:preset|color|secondary"
					}
				},
				"border": {
					"radius": "var:preset|border-radius|md"
				}
			},
			"heading": {
				"typography": {
					"fontWeight": "700",
					"lineHeight": "1.2"
				}
			},
			"h1": {
				"typography": {
					"fontSize": "var:preset|font-size|x-large"
				}
			},
			"h2": {
				"typography": {
					"fontSize": "var:preset|font-size|large"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "var:preset|color|muted"
				},
				"spacing": {
					"padding": {
						"top": "var:preset|spacing|40",
						"right": "var:preset|spacing|40",
						"bottom": "var:preset|spacing|40",
						"left": "var:preset|spacing|40"
					}
				},
				"border": {
					"radius": "var:preset|border-radius|lg"
				},
				"@mobile": {
					"spacing": {
						"padding": {
							"top": "var:preset|spacing|30",
							"right": "var:preset|spacing|30",
							"bottom": "var:preset|spacing|30",
							"left": "var:preset|spacing|30"
						}
					}
				}
			}
		}
	}
}

    What this generates

    A complete theme.json for a WordPress block theme: the settings that decide what the block editor offers (color palettes, font sizes, spacing presets, layout widths and design tools) and the styles WordPress applies to the site, its elements and its blocks.

    Styles can use preset references such as var:preset|color|primary, which WordPress turns into var(--wp--preset--color--primary). The Preset References tab lists both forms for every preset you define.

    To design the spacing scale itself and preview it as Gutenberg offers it, use WordPress Spacing System Generator. For fluid font sizes, CSS Clamp / Fluid Typography Generator writes a type scale as theme.json font size presets.

    Import safety

    Importing reads your file in this browser. Nothing is uploaded or stored. JSON that can’t be read changes nothing.

    An imported file becomes the document as it is. Each control edits one value in place, so properties this tool doesn’t edit stay exactly as they were: custom settings, blocks it doesn’t list, arrays, and settings from newer WordPress releases. The workspace counts them and lists them after the import. The only changes made on import are the ones WordPress itself makes when it loads a version 1 or 2 file, and each one is listed.

    WordPress version compatibility

    Every release from WordPress 6.6 to 7.1 reads theme.json version 3. Each release adds settings and styles; the target you pick sets the $schema, the controls offered, the diagnostics and the preview. Switching targets never removes anything from the document: newer features stay in the output and are flagged.

    • WordPress 6.7per-preset fluid font sizes without global fluid typography
    • WordPress 6.8:focus-visible styles for links and buttons
    • WordPress 6.9border radius presets (settings.border.radiusSizes); select element styles (styles.elements.select); text input element styles (styles.elements.textInput)
    • WordPress 7.0width (dimensions.width); height (dimensions.height); dimension presets (settings.dimensions.dimensionSizes); text indent (typography.textIndent); :hover, :focus, :focus-visible and :active styles for the Button block (core/button); the navigation-overlay template part area
    • WordPress 7.1viewport breakpoints (settings.viewport); responsive block styles (@tablet and @mobile); :hover, :focus, :focus-visible and :active styles for the Navigation Link block (core/navigation-link); the -current state for the Navigation Link block; minimum width (dimensions.minWidth); the background gradient setting (settings.background.gradient); text shadow (typography.textShadow); block visibility settings (settings.blockVisibility)

    Checked against WordPress’s published schemas and the WordPress Core source for each release. The Live Theme Lab is a model of how WordPress applies these styles, not WordPress itself; test the final theme in WordPress.

    Frequently asked questions

    Where does theme.json go?

    In the root folder of your theme, next to style.css. Block themes rely on it for their settings and styles, and classic themes can add one to configure the block editor.

    Does a child theme need its own theme.json?

    Only for what it changes. WordPress merges a child theme’s theme.json over its parent’s, so the child’s file can hold just the settings and styles that differ.

    What happens to changes made in the Site Editor?

    Styles chosen in the Site Editor are saved in the site’s database and take priority over theme.json; they don’t rewrite the file. The Create Block Theme plugin can save them into your theme’s files, and you can then import that theme.json here.