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.

WordPress Image Size Lab

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

WordPress theme.json Generator

About the WordPress theme.json Generator

Other tools you might need

WordPress Image Size Lab