CREATING A FSE CUSTOM THEME

CREATING A FSE CUSTOM THEME

Many things about building a FSE theme are contrary to the standard practice to building a traditional WordPress theme. Crucial files such as functions.php and style.css can be very minimal; folders for parts, patterns, styles, and templates while new are required; templates and template parts (includes) are expressed as HTML rather than PHP; and the complexity of the theme.json file can be intimidating.

There have always been three main paths to a custom presentation in WordPress:

  1. Selecting a theme that includes expanded customization controls and “page building” capabilities.
  2. Selecting a theme to use as a “parent” and creating a “child” theme that modifies certain aspects of the parent.
  3. Creating a bespoke theme that isn’t dependent on any external framework or parent theme.

In traditional WordPress theming most of us have found a baseline starter theme (mine was: https://underscores.me/ ) for this third option which gave a foundation that could be built upon to achieve customized functionality and presentation. FSE themes are structurally different and most of these “old reliable” starting points require significant modification before they are ready for the task – however there are many new alternatives that are ready to go “right out of the box”.

BLOCK THEME GENERATORS

These sites will generate a semi-customized FSE ready starter theme.

STARTER BLOCK THEMES

Here are some “lightly styled” FSE themes lend themselves well to child theming and/or as a starting point for a completely bespoke theme.

In the standard configuration there is a way to export a modified theme:

  1. go to the editor
  2. select any template
  3. click 3 dots in upper right corner
  4. select “export” from the flyout menu

This is a bit convoluted, and the result would still require some tweaking in a code editor afterwards – thankfully there is a better way.

CREATE BLOCK THEME PLUGIN:

WordPress itself has created an extremely powerful plugin that can do the following:

  1. Create a minimalistic FSE theme.
  2. Export the changes made to styling, templates, template parts and patterns in an active site as a child theme.
  3. Export the changes made to styling, templates, template parts and patterns in an active site as a cloned theme.

This means that you can now design an entire site in the WordPress editor and then save that entire configuration as a new and independent theme.