Creating new themes using the Site Editor

An alternative to creating themes from scratch using code is to make updates to an existing theme in the Site Editor and export the changes as a new, partial theme.

This method has limited support in WordPress 5.9 but will be improved in future updates. The Site Editor exports the templates and template parts but not the theme.json configuration file. The export will include the file structure but not the color palette or other block settings.

You can still use this method to speed up the theme creation if you are familiar with the block editor but not the block markup.

Editing an existing theme

The Site Editor is only available when a block theme is active. Because of that, you must first install and activate a block theme that you use as a base for your new theme.
– Make sure that the theme you use has a license compatible with GPL so that you have the legal right to make changes and transform it into your own theme. You can use any block theme from the WordPress theme directory as your base theme.

Optionally, you can download the Empty theme from the theme experiments GitHub repository. You do not need to remove any excess templates or blocks with this theme because the theme is nearly empty.

Only user roles with the correct capabilities (for example, administrator), can access the templates.

In the Site Editor, click on the WordPress icon or Site icon in the top toolbar to open the list of templates or template parts:

The Site Editor Template list.

Click on the name of the template or template part to open it in the Site Editor. From there, you can start editing by moving, deleting, or replacing the blocks.

Top ↑

Exporting

To export changes you have made in the Site Editor as HTML files, open the More tools & options menu and select export. Exporting will download a file called edit-site-export.zip.

The contents of the zip file are:

  • A folder called theme
  • A sub folder called templates, that contain the HTML template files
  • A sub folder called parts, that contain the HTML template part files

The markup up in the HTML files is complete and includes references to block id’s, queries and class names, custom color names, and pattern blocks.
If an exported file includes a reference number to a specific block such as navigation, you should remove the reference number:

<!-- wp:navigation {"ref":123} /—>

Should be

<!-- wp:navigation /-->

Top ↑

Creating a theme from the exported files

To convert the export to a complete WordPress theme, you need to add the minimum required files

Step 1: Rename the theme folder to your theme name. If your theme is called “My first theme” the name of the folder should be my-first-theme.

Next, please create a new style.css file and place it in the root folder.

Finally, create an empty index.php file and place it in the root folder.

Your theme should now have the following structure:

parts(dir)
templates(dir)
index.php
style.css


You can now activate the new theme, and you have created a theme almost without using code.
You can add a theme.json file, block patterns, and block styles to improve the theme further.

Changelog:

  • Created 2022-01-20