Create Default Templates for a Custom FSE Theme

, ,

In the FSE editor we now have templates that can be used to create custom layouts for things like single posts, pages, headers, and footers.

Before FSE you’d need to go digging into the theme files like single.php to make a customization to the single post template, but now anyone can customize these templates by adding or removing blocks from the template via wp-admin > Appearance > Editor. 

You can even create a default template that preloads a layout created with blocks into the FSE templates. This way when someone installs this theme, they have demo content preloaded that they can add to and remove without changing any of the theme’s code.

To test this functionality out: 

  1. Start off with the minimum theme files: 
    • an index.php file, which can be left empty
    • a style.css file with at least a comment with the theme name. (/* Theme Name: ashleygrace (FSE) */)
    • a folder name templates
      • index.html file inside the templates folder
  2. Activate your theme.
  3. Open your Index Template within the FSE template editor via wp-admin > Appearance > Editor.
  4. Create your desired layout using blocks.
  5. Save the template layout you created in the block editor by clicking the three little dots in the top right of the editor and clicking Export to Download your templates and template parts.
    • Optionally, within phpMyAdmin, you could copy the blocks from the post_content in the wp_posts table. 
  6. Open the theme.zip you downloaded in step 5 and open the index.html file in your code editor.
  7. Copy the blocks from this index.html file, paste them into your theme’s templates folder’s index.html folder, and save.

Now when anyone installs this custom FSE theme this index template will have a prebuild layout with blocks. This template can still be fully customized and reset back to the default template we added above. Try it:

  1. Go to wp-admin > Appearance > Editor
  2. In the Index template and make any changes to the template using blocks.
  3. Go back into the Index template and click the down arrow beside the Index template (top middle) and click Choose all templates.
  4. Beside your Index template click the three little docs.
  5. Click Clear customizations to return to your default index template, built into the theme.

That’s it, the power of FSE.


Leave a Reply

Your email address will not be published. Required fields are marked *