Create and customize theme.json

This tutorial will guide you through enabling the feature, exporting custom colors and fonts, and adding custom code to your theme.json file.

Enabling the Generate Theme.json Feature

To enable the feature, go to WordPress -> Theme and Plugin Settings. Under Export Options, you’ll find the option called Generate theme.json. Check this option, and when you export the project, the theme.json file will be exported as well.

Adding Custom Colors and Fonts

Once you enable the design panel in the project and export the theme again, the theme.json file will contain your custom colors and fonts if they are used in your project. For example, add a font called “Abril Fatface” and another font called “Permanent Marker”. Make sure that any font files required for these font families are included on the page, either by the automatically generated CSS file from the design panel or by adding these stylesheets manually. After making a change in the Design panel, save the project so that all the CSS files are saved. Export the project. Now, when you refresh the WordPress editor, all the colors and font families will be available for use.

Customizing theme.json with custom code

If you want to customize the theme.json file with your own custom code, create a new file called custom_theme.json and put any custom settings into this file. The format of this file is exactly the same as theme.json. During the export, the content of custom_theme.json will be merged into the theme.json file.

Important: do not to put any custom values directly into the theme.json file, as this file is automatically generated. Instead, always use custom_theme.json for any custom directives.