BlockStrap Documentation

Customizing a Full Site Editing (FSE) Template in WordPress: A Step-by-Step Guide

Full Site Editing (FSE) is a powerful feature in WordPress that allows you to design and customize your entire website using the Gutenberg block editor. FSE templates are highly customizable, making creating a unique and professional-looking site easy. In this guide, we will walk you through the process of customizing an FSE template using the new WordPress editor and using template parts.

Step 1: Access the Site Editor

  • Log in to your WordPress Dashboard.
  • Navigate to “Appearance” in the left-hand menu.
  • Click on “Editor (beta)” to access the Site Editor.
    appearance editor beta

Step 2: Choose a Template to Customize

  • In the Site Editor, locate the “Templates” tab in the left sidebar.
  • Click on the “Templates” tab to view the available templates for your theme.

Step 3: Familiarize Yourself with Template Parts

  • Before customizing your template, take some time to understand the different template parts included in your FSE theme. These template parts include headers, footers, sidebars, and hero sections.

Step 4: Edit the Template Content

  • To add a new block, click on the “+” icon in the top-left corner of the editor or within the content area. You can search for specific blocks or browse the available categories.
  • To move a block, click and drag it to the desired location within the template.

Step 5: Customize Template Parts

  • As you edit a template part, remember that any changes you make will be applied globally across your site, wherever that template part is used.
  • Once you’ve finished customizing a template part, click the “Save” button in the top-right corner to save your changes.

Step 6: Preview Your Changes

  • Customizing your template lets you preview your changes within the Site Editor in real-time.
  • To view a more accurate representation of how your changes will appear on the live site, click the “Preview” button in the top-right corner of the editor.

Step 7: Save Your Customized Template

  • A panel will appear, showing a list of your changes to the template and its associated template parts. Review your changes and click “Save” again to confirm.
    FSE editor save changes made

Customizing a Full Site Editing (FSE) template in WordPress is a straightforward process, thanks to the intuitive block editor and the use of template parts. Following these steps, you can create a unique and cohesive website design that effectively meets your needs and showcases your content.