WordPress.org

Jason Crist

Cullen Whitmore

jeffikus

Ben Dwyer

Echo

Sarah Norris

Maggie Cabrera

Jeff Ong

Matias Benedetto

Madhu Dollu

Vicente Canales

<p>This plugin allows you to:</p>
<ul>
<li>Create a blank theme</li>
<li>Create a new theme based on the currently active theme</li>
<li>Create a child theme of the active parent theme</li>
<li>Create a new style variation</li>
<li>Export a theme</li>
<li>Save user changed templates and styles to the active theme</li>
</ul>
<p>All newly created themes or style variations will include changes made within the WordPress Editor.</p>
<p>This plugin also makes several changes to the contents of a theme, including:</p>
<ul>
<li>Adds all images used in templates to the theme’s <code>assets</code> folder.</li>
<li>Ensures the block markup used in templates and patterns is export-ready.</li>
<li>Ensures most strings used in templates and patterns are translate-ready.</li>
</ul>
<p><em>Disclaimer:</em> The Create Block Theme plugin offers critical developer-friendly features; you can think of it as a Development Mode for WordPress, and you should <em>keep in mind that changes made through this plugin could change your site and/or theme permanently</em>.</p>
<p>(Make sure you know what you’re doing before hitting that ‘Save’ button 😉)</p>
<h4>Step 1 – Setup</h4>
<p>Install and activate the <a href="https://wordpress.org/plugins/create-block-theme" rel="ugc">Create Block Theme</a> plugin.</p>
<p>There will be a new panel accessible from the WordPress Editor, which you can open by clicking on a new icon to the right of the “Save” button, at the top of the Editor.</p>
<h4>Step 2 – Style Customizations</h4>
<p>Make changes to your site styles, fonts and templates using the Editor.</p>
<h4>Step 3 – Export</h4>
<p>Still in the WordPress Editor, navigate to the Create Block Theme menu at the top of the Editor.</p>
<p>To save recent changes made in the Editor to the currently active theme:</p>
<ul>
<li>Select “Save Changes” to save any recent changes to the currently active theme.</li>
</ul>
<p>To install and uninstall fonts:</p>
<ul>
<li>Install and activate a font from any source using the WordPress Font Library.</li>
<li>Select “Save Changes To Theme” and select “Save Fonts” to save all of the active fonts to the currently active theme. These fonts will then be activated in the theme and deactivated in the system (and may be safely deleted from the system).</li>
<li>Any fonts that are installed in the theme that have been deactivated with the WordPress Font Library will be removed from the theme.</li>
</ul>
<p>or export the theme:</p>
<ul>
<li>Select “Export Zip” to export the theme as a zip file.</li>
</ul>
<p>To edit the theme metadata:</p>
<ul>
<li>Select “Edit Theme Metadata” to edit the metadata for the theme. These details will be used in the style.css file.</li>
</ul>
<p>To inspect the active theme’s theme.json contents:</p>
<ul>
<li>Select “Inspect Theme JSON”</li>
</ul>
<p>To create a new blank theme:</p>
<ul>
<li>Select “Create Blank Theme”</li>
<li>Supply a name for the new theme (and optional additional Metadata)</li>
<li>Click “Create Blank Theme”</li>
</ul>
<p>To create a variation:</p>
<ul>
<li>Select “Create Theme Variation”</li>
<li>Provide a name for the new Variation</li>
<li>Click “Create Theme Variation”</li>
</ul>
<p>To create a new Clone of the current theme or to create a Child of the current theme:</p>
<ul>
<li>Click “Create Theme”</li>
<li>Click “Clone Theme” to create a new Theme based on the active theme with your changes</li>
<li>Click “Create Child Theme” to create a new Child Theme with the active theme as a parent with your changes</li>
</ul>
<p>Many of these options are also available under the older, deprecated Create Block Theme page under Appearance > Create Block Theme.</p>
<h3>General Troubleshooting</h3>
<p>If you are having problems, please try the following:</p>
<ul>
<li>Make sure you have the latest version of WordPress installed.</li>
<li>Make sure you have the latest version of the plugin installed.</li>
<li>Deactivate all plugins and see if this resolves the problem. If this works, re-activate the plugins one by one until you find the problematic plugin(s).</li>
<li>Switch the theme to the default theme to rule out any theme-related problems.</li>
<li>Check the <a href="https://wordpress.org/support/plugin/create-block-theme/" rel="ugc">Support forum</a> for similar issues.</li>
</ul>
<h3>I’m getting a corrupt zip file when I export my theme</h3>
<ul>
<li>First follow the general troubleshooting steps above.</li>
<li>Please make sure you <code>WP_DEBUG</code> setting in your <code>wp-config.php</code> file is set to <code>false</code> like this: <code>define( 'WP_DEBUG', false );</code>.</li>
<li>If your theme includes PHP files, ensure those files do <strong>not</strong> use PHP closing tags <code>?></code> at the end of the file. If they do, remove them.</li>
</ul>


Create Block Theme

This plugin is the perfect way to get started building block themes. You can edit an existing theme in the editor, and export your changes to a new theme or a  child theme. 

Perfect for the new block theme developer

The direction this plugin is going is fantastic and really empowers no-code/low-code theme designers. Would love to see it integrated in Core at some point, but having this functionality in a separate feature plugin is a great first step.

Fantastic already, but lots of potential

This plugin will let you create a block theme easily. It generates all the code so you can focus on design. I hope the authors will keep up the good work on this plugin and add even more features in the future.

Works perfectly!


Love it, and it's finally a clean and easy to use solution to send our theme users to, if they want to add a custom font or create a child theme for any purpose really.It's also great to add fonts to our themes, although it would be great, if it would work with variable fonts and WOFF2.


What did you do without this before 😍


I love this. In just about a blink of the eye, I can create my own custom version of an already-built theme. Sweet!


Easy Peasy


Thanks for this. It works well. It's exciting that block theme design is low code. This plugin makes it even more low code.


Kind of a dream


As someone learning how to create block themes, I appreciate that this plugin exists to help fill the gap in knowledge!



I appreciate this plugin


After hours of setting up my blog with blocks I realized: I should really use a child theme. A practice I forgot after years of not dealing with wordpress. When I created the most basic child theme it did not inherit my settings either. This plugin did exactly that. It made a minimal child theme with all my settings intact. My only problem with it, that it instantly turn the child theme to be active and that is a risky behavior, but it did not cause problems.


just great!


I have been using this plugin since its inception.The first versions lacked functionality, there was a conceptual change in the paradigm and approach, now it is a very convenient solution for configuring and saving changes to the file system during the development of WordPress Gutenberg FSE sites.



I am grateful to the developers for such a tool that allows you to solve many tasks without unnecessary effort, I recommend it to all developers who are starting their journey to FSE development.



I will add even more: 



I have Clients, whos seen this tool at the development stage, asked to leave it for their use and they independently make global changes, after which they successfully export (commit) to the file system and these are people who have nothing to do with the code.



They simply fell in love with Gutenberg, just like me, and work with it with love and pleasure.


A good solution for WordPress developers and not only.

A WordPress plugin to create block themes.

Helmut Wandl

<p><strong>Theme Designer</strong> is a powerful WordPress plugin that allows you to create and manage block themes (FSE themes) without writing a single line of code. It provides an intuitive interface to configure all theme settings that are typically defined in the <code>theme.json</code> file.</p>
<h4>Key Features</h4>
<ul>
<li><strong>Visual Theme Builder</strong>: Create new themes with a simple form interface</li>
<li><strong>Complete Settings Management</strong>: Configure all theme.json settings through an intuitive admin panel</li>
<li><strong>Theme Metadata</strong>: Set theme name, description, author, version, and other metadata</li>
<li><strong>Screenshot Management</strong>: Upload and manage theme screenshots</li>
<li><strong>Color Palettes</strong>: Define custom color palettes and gradients</li>
<li><strong>Typography Settings</strong>: Configure font families, sizes, and fluid typography</li>
<li><strong>Spacing & Layout</strong>: Set up spacing scales, layout sizes, and user controls</li>
<li><strong>Border & Shadow</strong>: Define border styles, radius, and shadow presets</li>
<li><strong>Background Controls</strong>: Configure background image and positioning options</li>
<li><strong>Theme Export</strong>: Download your themes as installable ZIP files</li>
<li><strong>Theme Duplication</strong>: Easily duplicate existing themes as starting points</li>
<li><strong>WordPress Defaults</strong>: Choose to include or exclude WordPress default settings</li>
</ul>
<h4>What Gets Created</h4>
<p>When you create a theme with Theme Designer, it automatically generates:</p>
<ul>
<li><strong>Theme Directory Structure</strong>: Complete theme folder with all necessary files</li>
<li><strong>style.css</strong>: Theme header with all metadata</li>
<li><strong>theme.json</strong>: Complete configuration file with all your settings</li>
<li><strong>Templates</strong>: Basic <code>index.html</code> template for the main content area</li>
<li><strong>Template Parts</strong>: <code>header.html</code> and <code>footer.html</code> parts for site structure</li>
<li><strong>Screenshot</strong>: Theme preview image (if uploaded)</li>
</ul>
<h4>How It Works</h4>
<ol>
<li><strong>Open Theme Designer</strong>: In the admin panel go to “Design” <span aria-hidden="true" class="wp-exclude-emoji">→</span> “Theme Designer”</li>
<li><strong>Create Theme</strong>: Fill out the theme metadata form</li>
<li><strong>Configure Settings</strong>: Use the visual interface to set up colors, typography, spacing, etc.</li>
<li><strong>Preview & Test</strong>: Your theme is immediately available in the WordPress admin</li>
</ol>
<h4>Perfect For</h4>
<ul>
<li><strong>Developers</strong> who want to quickly prototype themes</li>
<li><strong>Designers</strong> who prefer visual tools over code</li>
<li><strong>Agencies</strong> creating custom themes for clients</li>
<li><strong>WordPress users</strong> who want to create their own themes</li>
<li><strong>Theme shops</strong> looking to streamline theme creation</li>
</ul>
<h4>Integration with Site Editor</h4>
<p>Themes created with Theme Designer work seamlessly with the WordPress Site Editor. You can:</p>
<ul>
<li>Customize templates and template parts visually</li>
<li>Add custom styles through the Site Editor interface</li>
<li>Override theme settings on a per-page basis</li>
<li>Create additional templates and parts as needed</li>
</ul>
<p><strong>Note</strong>: Settings defined in the Site Editor take precedence over theme settings, even after saving new values in the theme.</p>
<h4>Requirements</h4>
<ul>
<li>Block theme support enabled</li>
<li>Write permissions for the themes directory</li>
</ul>
<h3>More from the same author</h3>
<p>Take a look at <a href="https://www.wppeak.com/" rel="nofollow ugc">www.wppeak.com</a></p>


Theme Designer

Create and manage block themes with an intuitive interface. No coding required - design your theme's settings through a user-friendly admin panel.

Create Block Theme vs Theme Designer