Ananta Code Academy
 Continue to Day 13
MODULE 02 · CONTENT & DESIGN

Introduction to the Site Editor (FSE)

Full Site Editing takes the block system from your posts and pages and applies it to your entire site — header, footer, and every template in between.

Day 12 of 30 Beginner ~18 min
01 · OVERVIEW

What "Full Site Editing" Means

Full Site Editing (FSE) extends the block editor from Day 9 beyond just posts and pages — to your header, footer, and every template that makes up your site. Instead of editing PHP template files or relying on the Customizer, you build your entire layout out of blocks.

This is only available if you're using a block theme, which you learned to identify back on Day 4. Classic themes still rely on the Customizer for site-wide changes.

02 · SITE EDITOR VS CUSTOMIZER

Two Different Ways to Edit Your Site

If your theme supports FSE, you'll notice the classic Customizer is replaced entirely by the Site Editor.

TOOL WHAT IT CONTROLS
Customizer

A panel of theme-defined settings — colors, menus, widgets — for classic themes. Limited to what the theme developer exposes.
Site Editor

A full visual canvas where you edit templates directly with blocks — header, footer, single post layout, and more.
CHECKING WHICH YOU HAVE

Go to Appearance in your dashboard. If you see "Editor," your theme supports FSE. If you only see "Customize," you're on a classic theme.

03 · THE BUILDING BLOCKS OF FSE

Templates, Template Parts & Patterns

FSE is built from a few core concepts that fit together like layers.

fse-concepts.txt 
// Core Site Editor concepts
Template          // controls a full page type, e.g. "Single Post"
Template Part      // a reusable piece, e.g. header or footer
Pattern            // a pre-designed group of blocks you can insert
Global Styles       // site-wide colors, fonts, and spacing settings
04 · NAVIGATING THE SITE EDITOR

Your First Look Around

The Site Editor has a few distinct areas worth knowing before you start editing.

  • Go to Appearance → Editor to open the Site Editor.
  • Click Templates in the sidebar to see every page type your theme defines.
  • Open a template, like "Home," to see it broken down into editable blocks.
  • Click any section — header, content area, footer — to select and edit it directly.
  • Use Styles in the sidebar to adjust site-wide colors, typography, and layout.
    • 05 · EDITING A TEMPLATE PART

    Changing Your Header Everywhere at Once

    Template parts are the clearest example of why FSE is powerful — edit your header once, and it updates on every page that uses it.

    CLASSIC THEME Changing your header layout usually means editing a PHP file directly, or being limited to whatever the Customizer exposes.
    BLOCK THEME (FSE) Click the header template part, rearrange blocks visually, and the change instantly applies site-wide.
    06 · COMMON FIRST MISTAKES

    What Trips Up FSE Beginners

    WATCH OUT FOR
    WRONG TEMPLATE Editing "Single Post" when you meant to change the homepage — always check which template you're in.
    GLOBAL VS LOCAL A style change in Global Styles affects the whole site; a change to one block only affects that instance.
    NO UNDO SAFETY NET Template changes save automatically — use the Site Editor's revision history if you need to roll back.
    07 · BREAKDOWN

    Breaking Down What You Just Learned

    1

    FSE extends blocks site-wideHeader, footer, and every template become editable blocks.

    2

    Requires a block themeClassic themes still use the Customizer instead.

    3

    Core conceptsTemplates, template parts, patterns, and Global Styles work together.

    4

    Template parts are reusableEdit a header once and it updates everywhere it's used.

    5

    Changes save automaticallyUse revision history if you need to undo a template edit.

    08 · TRY IT

    Try It Yourself

    EXERCISE

    Open Appearance in your dashboard and check whether you see "Editor" or "Customize." Note which one your active theme supports before starting today's practice.

    09 · TODAY'S PRACTICE

    Explore and Adjust Your Site Template

    HANDS-ON EXERCISE

    Getting comfortable inside the Site Editor

    If your theme doesn't support FSE, switch temporarily to a free block theme like Twenty Twenty-Four to follow along, then switch back afterward if you prefer your current theme.

    1. Open Appearance → Editor and browse the available templates.
    2. Open the header template part and rearrange or restyle one block.
    3. Open Styles and adjust your site's primary color.
    4. Insert one pattern from the pattern library into your homepage template.
    5. Check the front end to confirm your header and color changes appear site-wide.
    10 · RECAP

    Recap

    FULL SITE EDITING

    Extends the block editor to your header, footer, and every template.

    TEMPLATE PARTS

    Reusable pieces like headers that update everywhere at once.

    GLOBAL STYLES

    Site-wide colors, fonts, and spacing controlled from one place.

    BLOCK THEMES ONLY

    Classic themes still rely on the Customizer instead of FSE.

    11 · SUMMARY

    Key Takeaways

    • Full Site Editing extends the block system to your header, footer, and every page template.
    • FSE requires a block theme — classic themes still rely on the Customizer.
    • Templates, template parts, patterns, and Global Styles are the core building blocks of FSE.
    • Editing a template part like the header updates it everywhere it's used, instantly.
    • Template changes save automatically, so use revision history if you need to undo something.
    Course Overview