Tools

WordPress theme.json Generator

Build a valid theme.json — and see which half actually changes your site.

Runs in your browser. Nothing is uploaded.

Layout

contentSize is the default column width; wideSize is what a block gets when set to "Wide width".

Content width (px) Wide width (px)

Palette

These become CSS custom properties and appear in every colour picker in the editor.

Contrast (text)

Base (background)

Accent (links)

Options

Fluid typographyEmits clamp() font sizes that scale with the viewport instead of jumping at breakpoints. appearanceToolsTurns on border, spacing, typography and colour controls in one line instead of enabling each by hand. Also apply the stylesAdds a styles block so the palette actually renders on the front end. Without it the colours are only offered in the editor. Spacing scaleGenerates a 7-step spacing preset so padding and margin controls have sensible values.

settings vs styles

theme.json

Save this as theme.json in your theme root. It is read on every page load, so no build step and no cache to clear.

About the WordPress theme.json Generator

A WordPress theme.json generator that emits a valid version 3 file: layout widths, a colour palette, fluid type and a spacing scale. It also makes the distinction that trips everyone up visible — settings offers values to the editor, styles applies them to the front end, and a palette alone changes nothing until something uses it.

When you need it

Use it when you are starting a block theme or child theme and want a working palette, font sizes and content widths without typing JSON by hand. theme.json also works with classic themes, where it can add a palette and font sizes to the block editor.

How to use it

Set your colours, font sizes and layout widths above.
Copy the output into a file named theme.json in the root folder of your theme, next to style.css.
Open the Site Editor (Appearance > Editor) and check that your colours and sizes show up under Styles.

The file starts with a $schema line pointing at schemas.wp.org. Code editors such as VS Code use it to autocomplete keys and flag typos.

Common mistakes

A trailing comma or a missing quote. JSON does not allow them, and one stray character makes the whole file invalid.
Using version 3 on an older site. The output uses theme.json version 3, which needs WordPress 6.6 or later.
Editing the file and seeing no change. Styles saved by a user in the Site Editor override theme data, so reset them there to see your file's values.

For what every key does, read theme.json explained.

WordPress Image Size Lab

Drop an image in. See every copy WordPress will make of it.