Block Editor, FSE, FSE Series
| |

FSE Series 3: Exploring the Site Editor: Designing Headers, Footers, and Template Parts

ByG Web Design

Target Audience: Users familiar with the Site Editor basics, ready to customize headers/footers and understand template parts.

Introduction

In Post 2, you set up Twenty Twenty-Five and glimpsed the power of the Site Editor. Now, it’s time to design your site’s header and footer—the cornerstones of your site’s identity. By the end of this guide, you’ll:

  1. Understand the difference between templates and template parts.
  2. Confidently customize headers and footers using blocks.
  3. Save and reuse template parts across your site.

Let’s turn your site from “default” to “distinctive”!

Part 1: Templates vs. Template Parts

First, let’s clarify two core FSE concepts:

  1. Templates
    • Define the layout of specific page types (e.g., blog posts, archives, 404 pages).
    • Example: The Single Post template controls how individual blog posts look.
  2. Template Parts
    • Reusable sections like headers, footers, or sidebars.
    • Edit once, and changes apply everywhere they’re used.

Why this matters:

  • Headers and footers are template parts.
  • Templates (like Home or Single Post) use template parts to build full pages.

To edit them:

  • Go to Appearance > Editor > Template Parts (for headers/footers).
  • Go to Appearance > Editor > Templates (for page layouts).

Part 2: Customizing Your Header

Let’s redesign the header step-by-step:

  1. Open the Header Template Part:
    • In the Site Editor (Appearance > Editor), click Template Parts > Header.
  2. Remove Default Blocks:
    • Delete the existing logo, navigation, and search blocks (click the block > three dots > Remove).
  3. Build a New Header:
    • Add a Row block (for structure) and set it to full-width.
    • Inside the row:
      • Add a Site Logo block (upload your logo via the block settings).
      • Add a Navigation block (select an existing menu or create a new one).
      • Add a Social Icons block (link to your social profiles).
  4. Style Your Header:
    • Use the Styles panel (top-right) to set background color, spacing, and borders.
    • Toggle Sticky Header in the Row block settings to make it fixed on scroll.

Pro Tip: Use the Device Preview (top toolbar) to ensure your header looks great on mobile!

Part 3: Designing a Footer from Scratch

Footers are prime real estate for contact info, newsletters, or copyright text. Let’s build one:

  1. Open the Footer Template Part:
    • Navigate to Template Parts > Footer in the Site Editor.
  2. Add a Columns Block:
    • Insert a Columns block with 3 columns.
    • In each column:
      • Column 1: Add a Paragraph block with a brief site description.
      • Column 2: Add a Navigation block for footer links (e.g., “Privacy Policy,” “Contact”).
      • Column 3: Add a Social Icons block or Newsletter Form (via a plugin like Jetpack).
  3. Add a Copyright Notice:
    • Below the columns, insert a Group block with a centered Paragraph block:
      • “© 2024 Your Site Name. All rights reserved.”
  4. Apply Global Styles:
    • Use the Styles panel to set footer background color (darker than the header for contrast).

Save Your Work: Click Save (top-right) to apply changes globally.

Part 4: Reusing Template Parts

Once you’ve designed a header or footer, reuse it anywhere:

  1. Create a New Template Part:
    • In the Site Editor, click + (top-left) > Template Part.
    • Name it (e.g., “Custom Sidebar”).
  2. Add It to a Template:
    • Open a template (e.g., Single Post).
    • Insert the Template Part block and select your custom sidebar.

Note: Changes to a template part automatically update everywhere it’s used!

FAQs

Q: How do I revert to the default header/footer?
A: Open the template part, click the three dots (top-right), and select Reset to default theme.

Q: Can I have different headers for different pages?
A: Yes! Create multiple headers (e.g., “Homepage Header”), then assign them using Template Part blocks in specific templates.

Q: Why isn’t my Navigation block showing dropdown menus?
A: Ensure your menu has parent/child items in Appearance > Menus. The Navigation block supports dropdowns by default in FSE.

What’s Next?

You’ve just transformed your site’s header and footer—no coding required! In Post 4, we’ll unlock the magic of Global Styles to:

  • Set site-wide colors, fonts, and spacing.
  • Create a consistent brand identity.
  • Override styles for individual blocks.

For now, experiment with adding custom template parts (like a “Call to Action” banner) to your templates!

Conclusion

Headers and footers are no longer locked away in PHP files. With FSE, they’re just blocks—ready to be moved, styled, and reinvented. You’re not just editing a website; you’re architecting an experience.

Feeling proud? You should be. In the next post, we’ll ensure every part of your site sings in harmony with Global Styles. See you there!

Love what you see? Explore our packages and pricing – let’s bring your vision to life!

Similar Posts