Discover how to use the new Pinegrow WordPress builder feature that allows you to export theme.json files with your WordPress themes.
This tutorial will guide you through enabling the feature, exporting custom colors and fonts, and adding custom code to your
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
Important: do not to put any custom values directly into the
theme.jsonfile, as this file is automatically generated. Instead, always use
custom_theme.jsonfor any custom directives.