Skip to main content

Managing theme.json

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

If you are using this with the @roots/bud-preset-wordpress or @roots/sage preset you can also access the class using bud.wp.json.

Enabling theme.json support​

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

bud.wpjson.enable()

Managing generic theme.json values​

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

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.wpjson
  .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.

wp.json.useTailwindColors()​

Convert theme.colors to a theme.json palette.

bud.wpjson.useTailwindColors()

wp.json.useTailwindFontSize()​

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

bud.wpjson.useTailwindFontSize()

wp.json.useTailwindFontFamily()​

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

bud.wpjson.useTailwindFontFamily()

wp.json.useTailwindSpacing()​

Emits values from theme.spacing as the spacing property of theme.json.

bud.wpjson.useTailwindSpacing()

Limiting values to those defined in theme.extend​

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

bud.wpjson.useTailwindColors(`extend`)

In combination​

You can use these methods in combination:

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