Full Site Editing basics in Wordpress - Mini Project: Build & Apply

Full Site Editing basics

📖 Scenario: You are building a simple WordPress site using Full Site Editing (FSE). You want to create a custom header block with a site title and a navigation menu.

🎯 Goal: Build a basic WordPress theme template part using Full Site Editing blocks that includes a site title and a navigation menu.

📋 What You'll Learn

Create a block template part for the header

Add a site title block with the exact text 'My Awesome Site'

Add a navigation block with three menu items: Home, About, Contact

Use proper block syntax and structure for FSE

💡 Why This Matters

🌍 Real World

Full Site Editing lets you build and customize WordPress themes visually using blocks, making site design easier and more flexible.

💼 Career

Knowing how to create and edit block template parts is essential for WordPress theme developers and site builders working with modern WordPress versions.

1

Create the header template part

Create a block template part file named header.html with a root block that will contain the header content.

Wordpress

Need a hint?

The group block is a container block that holds other blocks inside it.

2

Add the site title block

Inside the group block, add a block with the exact text My Awesome Site as the site title.

Wordpress

Need a hint?

The site title block displays the site name. You can set its text directly in the block comment.

3

Add the navigation block with menu items

Below the site title block, add a block containing three blocks with the exact link texts Home, About, and Contact.

Wordpress

  My Awesome Site
  

Need a hint?

The navigation block holds navigation-link blocks as menu items.

4

Complete the header template part

Ensure the header.html file contains the full group block wrapping the site title and navigation blocks exactly as specified.

Wordpress

  My Awesome Site
  
  
    Home
    About
    Contact
  
  
  

Need a hint?

Check that all blocks are properly nested and closed.