Start For Free
Code
Create accurate, complex WordPress plugins and code snippets with AI.
Chat
Talk with an AI WordPress expert, 24/7.
Troubleshoot
Immediately fix scary fatal errors.
Security
Secure your website with AI. Ultimate protection, ultimate piece of mind.
Community
Share snippets, and join in the AI WordPress Community.
All Features
//Free AI Tools
->

Theme.json Admin

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

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

Enable this to include schema settings in your theme.

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

Enable this option to allow custom colors in your theme.

Toggle this to enable custom gradient settings in your theme.

Enable this to allow custom link colors in your theme.

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

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

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

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

Color Palette

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

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

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

Duotone Color Palette

Enter a name for the duotone color setting.

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

Specify the primary color for the duotone effect.

Gradients

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

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

Specify the starting color of the gradient.

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

Specify the ending color of the gradient.

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

Font Sizes

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

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

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

Spacing

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

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

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

Typography

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

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

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.

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

Visitor Features (Login/Register)
// Code will be generated here (JSON).
Powered by CodeWP's Propiratary WordPress AI. Need more complex generations? Use the CodeWP Platform.

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:

  1. Removing reliance on multiple theme support flags in favor of consolidated JSON-based configuration.
  2. Built-in custom CSS variables from presets and custom settings that get automatically passed to the front-end theme stylesheets.
  3. Control over editor interfaces by opting in/out of certain customization options.
  4. Granular style variants for global, block, and element levels in the editor.
  5. 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.

Theme.json Admin FAQs

What Is Theme.JSON?

Theme.json is a JSON configuration file introduced in WordPress 5.8 to provide more advanced global styles and theme settings for the block editor.

How do I use the generated theme.json file?

Save the downloaded theme.json file into the root folder of your WordPress theme. The file will be automatically detected and its configurations applied.

Can I edit the file manually later?

Yes, you can open the generated theme.json file in a text or code editor for further customization. Just be careful not to introduce syntax errors.

What WordPress version does theme.json require?

Theme.json functionality requires WordPress 5.8 or newer. Some features may need an even newer version like 5.9.

Related AI Tools & Generators

Make WordPress Easy With AI
© WPAI, Inc. 2024 | d.b.a CodeWP
cross