Full Site Editing with Gutenberg: Edit Headers, Footers, and Templates

If you have ever wanted to change your website header without touching a single line of code, full site editing WordPress makes that possible. Introduced as a major feature in WordPress 5.9, Full Site Editing (FSE) gives you complete visual control over every part of your website, from the top navigation bar to the footer copyright text, all inside one editor.

What Is Full Site Editing WordPress and Why Does It Matter?

Full Site Editing is a WordPress feature that lets you design and customize your entire website using blocks, the same drag-and-drop building system you already use when writing posts and pages.

Before FSE, customizing your header or footer usually meant:

• Editing PHP template files, which required coding knowledge
• Using a premium page builder plugin like Elementor or Divi
• Being limited to whatever options your theme offered in the Customizer

FSE removes those barriers. If you can click and type, you can redesign your entire site layout.

This matters especially for business owners who want a professional-looking site without hiring a developer every time they need to update their navigation menu or add a phone number to the footer.

Key takeaway: FSE is the most significant shift in how WordPress works since the original Gutenberg editor launched in 2018. Learning it now puts you ahead of the curve.

Block Themes: The Foundation of the Gutenberg Site Editor

FSE only works with block themes, and understanding why matters before you start.

A block theme is a WordPress theme built entirely with blocks. Unlike traditional themes that use PHP template files, block themes store their templates and template parts as HTML files filled with block markup. This is what allows the Site Editor to read, display, and let you edit them visually.

Classic Themes vs. Block Themes

Popular free block themes to start with include:

• Twenty Twenty-Four: WordPress’s official default block theme, clean and flexible
• Ollie: Business-focused with pre-built patterns, great for beginners
• Kadence: A versatile block theme with a strong pattern library

If you are currently using a classic theme like Astra, GeneratePress, or OceanWP without a block-theme version, FSE will not be available to you. You would need to switch themes first.

Key takeaway: Check whether your current theme supports FSE before diving in. If it does not, consider switching to a block theme before building anything major.

How to Access the WordPress Site Editor

Once you have a block theme active, accessing the Site Editor is straightforward.

Go to your WordPress dashboard, then navigate to Appearance > Editor.

The Site Editor will open in full-screen mode. On the left side, you will see a navigation panel with five main sections:

• Navigation: Manage your site menus
• Styles: Control global colors, typography, and spacing
• Pages: View and edit individual pages
• Templates: Edit full-page layout templates
• Patterns: Manage reusable block groups, formerly called template parts

Think of the Site Editor as a command center for your site’s design. Everything that affects how your site looks lives here.

Understanding Templates and Template Parts

This is where many beginners get confused, so let’s break it down clearly.

What Are Templates?

A template is the full-page layout that wraps around your content. When someone visits your homepage, WordPress loads a specific template to display it. When they visit a blog post, a different template loads.

Common templates include:

• Front Page: Your homepage layout
• Single Post: How individual blog posts display
• Page: How standard pages like About and Contact display
• Archive: How category or tag pages display
• 404: What visitors see when a page is not found
• Search Results: How search results are displayed

What Are Template Parts?

Template parts are reusable sections of a template. Your header and footer are the most common examples.

Here is how they connect: your “Single Post” template might include a Header template part at the top, the main post content in the middle, and a Footer template part at the bottom.

When you edit the Header template part, that change automatically applies to every template that uses it. That is why changing your logo once updates it everywhere on your site.

Other common template parts include:

• Post meta showing author, date, and category
• Sidebar layouts
• Comment sections
• Call-to-action banners

Key takeaway: Templates control full-page layouts. Template parts are reusable chunks within those layouts. Edit a template part once and it updates everywhere automatically.

How to Edit Your Header in the Site Editor

Your header is probably the first thing you will want to customize. Here is how to do it step by step.

Step 1: Go to Appearance > Editor in your WordPress dashboard.

Step 2: In the left panel, click Patterns, then look for the Header section. Click on your active header to open it. Alternatively, click directly on the header area in the visual preview on the right side of the screen.

Step 3: The header template part will open in the block editor. You will see blocks for your site logo, site title, and navigation menu.

Step 4: To change your logo, click the Site Logo block. An upload button will appear in the block toolbar at the top. Click it to upload a new logo from your media library.

Step 5: To edit your navigation menu, click the Navigation block. You can add new menu items by clicking the “+” button, or reorder existing ones by dragging them.

Step 6: When you are happy with the changes, click Save in the top-right corner. You will see a summary of what will be saved. Confirm by clicking Save again.

Changes to your header template part will instantly apply to every page on your site that uses it.

How to Edit Your Footer

The process for editing your footer is almost identical to the header.

Step 1: In the Site Editor, click Patterns in the left panel, then locate the Footer section.

Step 2: Click your active footer to open it in the editor.

Step 3: Most footers contain a combination of blocks. Common footer blocks include:

• Paragraph block: For copyright text
• Navigation block: For footer menu links
• Social Icons block: For social media links
• Columns block: To organize content into multiple columns
• Image block: For payment badges or trust logos

Step 4: Click on any text to edit it directly. To add a new block, click the “+” button anywhere inside the footer.

Step 5: A common footer addition for business owners is a social icons row. Click “+”, search for “Social Icons,” and add your platforms. Link each icon to your actual profile URL.

Step 6: Save when finished.

Pro tip: If you want a footer with multiple columns, use our guide on Advanced Gutenberg Techniques: Columns, Groups, and Nested Blocks to structure your layout cleanly before adding content.

Key takeaway: The footer is a trust-building area of your site. Use it for contact details, key page links, and social proof elements like certifications or review badges.

How to Customize Page Templates

Beyond headers and footers, FSE lets you redesign how entire page types look.

Let’s say you want your blog posts to show a large featured image at the top, followed by the article, with the author bio at the bottom. Here is how to set that up.

Step 1: In the Site Editor, click Templates in the left panel.

Step 2: Click Single Post (or whichever template you want to customize).

Step 3: The full template will open. You will see the Header template part at the top, the main content area in the middle, and the Footer template part at the bottom.

Step 4: Click anywhere in the main content area to start editing. You can add blocks before or after the core “Post Content” block.

To add a featured image at the top of every post:

• Click above the Post Content block
• Hit “+” and search for “Post Featured Image”
• Add it and resize it to your preferred dimensions

Step 5: To add an author bio section after every post, click below the Post Content block, add a Group block, and build your author layout inside it using Image, Heading, and Paragraph blocks.

You can also use dynamic blocks that pull real data from your posts automatically:

• Post Title: Displays the title of the current post dynamically
• Post Date: Shows the publish date automatically
• Post Author: Pulls the author name and bio from user settings
• Post Categories: Lists the categories for each post

These populate themselves once placed in a template, so you set them up once and every post uses them. For more block options, check out our guide on Essential Gutenberg Blocks: The Ones You Will Actually Use.

Global Styles: Keep Your Design Consistent Across the Whole Site

Global Styles is one of the most powerful and underused features in FSE. It lets you set design rules that apply across your entire site from a single panel.

Step 1: In the Site Editor, click the circle icon in the top-right toolbar. It looks like a half-dark, half-light circle. This opens the Styles panel.

Step 2: The Styles panel has three main sections:

• Typography: Set your global font family, sizes, and weights
• Colors: Set your global palette, background, text, and link colors
• Layout: Set default spacing and container width

Step 3: To set your brand font, click Typography, then Text. Choose a font from the list. Every heading and body text block across your site will update immediately.

Step 4: To set your brand colors, click Colors, then Palette. Add your custom hex codes here. Once added, these colors appear in the color picker for every block on your site.

This means you change your brand color in one place and it updates everywhere. No hunting through pages trying to fix inconsistencies.

For reusable design patterns like a styled call-to-action box or a testimonial card, explore WordPress Shortcodes: Create Reusable Content Elements for an alternative approach that works alongside FSE.

Key takeaway: Set your Global Styles before you start building individual pages. It will save you enormous time and keep your design consistent from day one.

FSE vs. Traditional Themes vs. Page Builders

You might be wondering whether you should switch to FSE or stick with what you know. Here is an honest comparison.

Choose based on your situation:

• Stick with a classic theme if your site is already working well and a redesign would risk breaking things. There is no urgent reason to switch.
• Consider a page builder if you need very complex layouts with pixel-perfect control and animations. Tools like Elementor still have specific advantages for those use cases.
• Use FSE if you are starting a new site or want to future-proof your WordPress setup. It is the direction WordPress is heading, and learning it now will pay off.

For keeping your site secure and performant as you build it out, take a look at SSL Certificates for WordPress: HTTPS Setup and Troubleshooting and CDN for WordPress: Speed Up Your Site for Global Visitors.

Best Practices for Building With FSE

Before you start redesigning everything, a few habits will save you significant pain later.

1. Save your style variations before making big changes. The Styles panel lets you save different design variations. Use this as a safety net before major edits so you can revert if something goes wrong.

2. Use Patterns for repeated layouts. If you build a testimonial section you like, save it as a Pattern. Go to the block toolbar, click the three-dot menu, and select “Create Pattern.” You can then insert it on any page in seconds.

3. Test on mobile before going live. The Site Editor has a responsive preview button in the top toolbar. Check your header and footer on mobile and tablet views. Navigation menus especially need testing on smaller screens.

4. Do not delete the original template. When you edit a template, WordPress saves your customized version but keeps the original theme template as a fallback. If something goes wrong, click “Reset to Default” to restore it.

5. Keep your plugin list lean. FSE is designed to reduce reliance on plugins. Before installing anything new, check whether a block or pattern can do the same job. Fewer plugins mean a faster, more stable site. If you do need plugins, start with Must-Have WordPress Plugins for New Business Websites.

If you run into problems during your FSE setup, WordPress Error Messages Explained: What They Mean and How to Fix Them is a useful troubleshooting reference to keep bookmarked.

Frequently Asked Questions

What to Do Next

Step 1: Check if your theme supports FSE. Go to Appearance > Editor in your WordPress dashboard. If you see the full Site Editor, you are ready. If you only see the classic Customizer, switch to a block theme first. Twenty Twenty-Four is free, already installed on most WordPress sites, and a solid starting point.

Step 2: Set your Global Styles before touching anything else. Open the Site Editor and click the Styles icon (half-circle, top-right corner). Set your brand fonts and colors here first. This creates a consistent foundation before you build or customize any templates.

Step 3: Edit your header and footer. These two template parts have the biggest immediate visual impact. Follow the steps in this guide to update your logo, navigation, and footer details. These changes will improve your site’s professionalism right away.

Step 4: Deepen your Gutenberg skills. FSE is built on Gutenberg blocks. The more comfortable you are with blocks, the faster you will work in the Site Editor. Read Essential Gutenberg Blocks: The Ones You Will Actually Use and Advanced Gutenberg Techniques: Columns, Groups, and Nested Blocks to level up quickly.