->

Theme.json Generator

Beta

Theme.json Generator

Quickly generate optimized theme.json files for WordPress without coding using our automated AI tool or manual inputs.

CodeWP's public tools use small AI models to enable fast WordPress code generations. However, these models may produce inaccurate code. Carefully review all generated code before use. For better accuracy and support, use the full CodeWP Platform. Get started for free.

AI auto_awesome

AI Input

CodeWP's AI will process this text and return the AI output. It will not account for other settings in the form, so be specific. Max words 60. AI Disclaimer

Appearance

Include Schema

Enable this to include schema settings in your theme.

Appearance Tools

Toggle this to enable or disable the appearance tools in the theme.

Custom Color

Enable this option to allow custom colors in your theme.

Custom Gradient

Toggle this to enable custom gradient settings in your theme.

Custom Link Color

Enable this to allow custom link colors in your theme.

Custom Font Sizes

Toggle this option to enable custom font size settings in your theme.

Custom Line Height

Enable this to allow custom line height settings in your theme.

Drop Caps

Toggle this to enable or disable drop caps in your theme.

Text Domain

Enter the text domain of your theme. This is used for translation purposes.

Color Palette

Color Name

Enter a name for your color. This will be used to identify the color in the theme settings.

Color Slug

Provide a unique slug for the color. This is a machine-readable name used in the code.

Color Value

Specify the color value. This can be in any CSS color format (e.g., hex, rgb).

Duotone Color Palette

Duotone Name

Enter a name for the duotone color setting.

Duotone Slug

Provide a slug for the duotone color setting. This should be unique and machine-readable.

Duotone Primary Color

Specify the primary color for the duotone effect.

Gradients

Gradient Name

Enter a name for your gradient. This will be displayed in the theme settings.

Gradient Slug

Provide a slug for the gradient. This is a unique, machine-readable identifier.

Gradient Start Color

Specify the starting color of the gradient.

Gradient Start Percentage

Enter the starting position of the gradient color as a percentage.

Gradient End Color

Specify the ending color of the gradient.

Gradient End Percentage

Enter the ending position of the gradient color as a percentage.

Font Sizes

Font Size Name

Enter a name for the font size. This name will be displayed in the theme settings.

Font Size Slug

Provide a slug for the font size. This should be a unique, machine-readable identifier.

Font Size Value

Enter the value for the font size. Specify this in pixels, ems, or other CSS units.

Spacing

Custom Padding

Toggle this to enable or disable custom padding settings in your theme.

Custom Margin

Toggle this to enable or disable custom margin settings in your theme.

Units

Specify the units to be used for spacing values. Separate multiple units with commas.

Typography

Font Name

Enter a name for the font. This will be used to identify the font in the theme settings.

Font Slug

Provide a slug for the font. This should be a unique, machine-readable identifier.

Font Family

Specify the font family. This could be a system font, a web font, or any other type.

Content Width

Specify the default width for content areas in your theme.

Wide Width

Specify the default width for wide content areas in your theme.

Visitor Features (Login/Register)

// Code will be generated here (JSON).

How To Use This Tool

1. Define Your Settings

Use our Structured form to modify the code you're about to generate.

Watch A Demo →

2. Or Prompt Our AI

Alternatively, you can prompt our AI to do this for you.

Learn More About Prompting →

3. Copy code and Install

Click the generate code button, copy it, and install it on a testing website.

How To Test Code →

More Info About Theme.json

Theme.json is a JSON configuration file that was introduced in WordPress 5.8 to provide advanced global styling and theme settings specifically for the block editor. It has continued to evolve in subsequent WordPress versions with version 2 introduced in WordPress 5.9.

Rationale for Theme.json

Prior to theme.json being introduced, the block editor API and theme integration options had grown in complexity over time. There were various theme support flags, CSS approaches, editor settings, etc that themes could utilize, but it had become messy and difficult to configure cohesively.

Theme.json consolidates all of these separate configuration mechanisms for the block editor into one single standardized file. This provides an improved developer experience for building block-first themes.

It also allows settings and styles to be managed in a more granular way, with global, block, and element specific options exposed. The different origins of styles such as from core, themes, or users can also be handled better rather than specificity wars.

Functionality

At a high level, theme.json enables themes to configure block editor parameters including:

Global and block specific editor settings
Global and block specific styles
Template part definitions
Pattern library imports
Customization opt-in/opt-outs
Block presets e.g. for color palettes
Creation of custom CSS variables

And more. The functionality continues to expand too.

Some key areas where theme.json improves block theme development:

Removing reliance on multiple theme support flags in favor of consolidated JSON-based configuration.
Built-in custom CSS variables from presets and custom settings that get automatically passed to the front-end theme stylesheets.
Control over editor interfaces by opting in/out of certain customization options.
Granular style variants for global, block, and element levels in the editor.
Template files matching for custom post templates and template parts.

Usage

To utilize theme.json configuration in a theme, you'll need WordPress 5.8+ with the JSON file added into the root theme folder.

The file format uses a specific schema broken into sections like settings, styles, templates etc. It's then detected automatically to apply the configurations on theme activation.