singular.html

Generate FSE child theme

Generate your own Full Site Editing (FSE) child theme from existing themes.



Instructions

Select a theme from the drop down list then choose the Preview button.

The page will be redisplayed with the selected theme’s style.

When you’ve found a style you like, choose the Parent theme upon which your new theme’s templates, template parts and patterns will be found. If you’ve already selected a child theme then this will have been preselected.

The tool allows you to chose a Parent theme which is different from the Theme style, but your child theme may not work as expected.

Also choose settings for the Content size, Wide size, and Block gap, and enter your Child theme name.

Then choose the Download zip button.

If everything checks out a new child theme will be generated using theme.json from the Theme style and setting the template to the parent theme.

Download the .zip file and install it in your website. The parent theme should be installed automatically.


What you’ll get

The generated child theme will consist of a .zip file containing the child theme’s files.

File nameContents
style.cssThe mandatory file that identifies your new child theme and the required parent theme ( template ).
This file won’t contain any CSS, even if the theme you selected did have some.
You may wish to edit this file to set your own values.
theme.jsonA copy of the theme.json file from the original theme, which itself may have been a child theme, with adjustments made for the settings you chose.
readme.txtThe readme file for the generated theme.

Additional usage notes

When you use the Preview button the page will be redisplayed using the theme you’ve chosen. It may look a bit different from the original page. Here are some screenshots for a number of different themes.

This is experimental code. In some cases you may see messages. Whether or not you continue to download a child theme when this happens is up to you.

Limitations of the generated child theme

Current limitations

  • No screenshot file is provided.
  • No functions.php file is provided.
  • No assets, such as theme provided fonts, are included.
  • Mixing Theme style and Parent theme is an experimental feature.

Proposed improvement areas

  • The Preview option should take into account your options for content size, wide size and other settings.
  • It should be possible to choose the typography from any existing theme.
  • It should be possible to select a colour palette from any existing theme.
  • Ditto for gradients.
  • Include logic to load theme defined fonts.
  • Add logic to support Style variations in the styles folder.
  • Fixes for issue 6

Further reading

This functionality is provided by a plugin called Foster Child. bobbingwide/foster-child.

The plugin piggy backs on another plugin, called oik-patterns, for the Preview capability.

If you want to generate a theme with templates and template parts which you can then extend try Carolina Nymark’s Block theme generator.

WordPress handbook

Published:

Last updated:

March 14, 2022

Information