Skip to main content

Managing theme.json

You can manage WordPress' theme.json config file from the context of your bud config using bud.wptheme.

Enabling theme.json support

In order to emit the file you will need to enable the feature:

bud.config.mjs
bud.wpjson.enable()

Managing generic theme.json values

You can use setOption from the bud.js extensions API to set theme.json values:

bud.config.mjs
bud.wpjson.setOption('customTemplates', []).enable()

Managing the settings field

Most theme.json configuration centers around the settings property. You can modify these values using a fluent container interface exposed by bud.wpjson.settings.

bud.config.mjs
bud.wptheme
.settings(theme =>
theme
.set('typography.customFontSizes', true)
.set('typography.fontWeight', false)
.merge('spacing.units', ['px', '%', 'em']),
)
.enable()

Using tailwindcss config values

If you use @roots/bud-tailwindcss in your project there are several opt-in config functions that allow you to generate theme.json values directly from your tailwind config.

wpjson.useTailwindColors()

Convert theme.colors to a theme.json palette.

bud.config.mjs
bud.wpjson.useTailwindColors().enable()

wpjson.useTailwindFontSize()

Emits values from theme.fontSize as the typography.fontSizes property of theme.json.

bud.config.mjs
bud.wpjson.useTailwindFontSize().enable()

wpjson.useTailwindFontFamily()

Emits values from theme.fontFamily as the typography.fontFamilies property of theme.json.

bud.config.mjs
bud.wpjson.useTailwindFontFamily().enable()

Limiting values to those defined in theme.extend

You can pass true to any of the the above functions to limit the values emitted to those defined under tailwind's theme.extend key.

bud.config.mjs
bud.wpjson.useTailwindColors(true).enable()

In combination

You can use any of these methods in combination:

bud.config.mjs
bud.wpjson
.useTailwindColors()
.useTailwindFontSize()
.useTailwindFontFamily()
.setOption('typography.fontWeight', false)
.enable()