FSE Series 7: Understanding the Template Hierarchy in FSE: Control Your Site’s Structure

Target Audience: Users ready to customize layouts for archives, single posts, and other page types.

---

Introduction

In classic WordPress themes, PHP files like single.php or archive.php dictated your site’s layout. With FSE, block templates replace those files—but the logic of which template to use when still follows the Template Hierarchy.

By the end of this guide, you’ll:

1. Understand how FSE’s templates map to the traditional hierarchy.
2. Customize layouts for archives, single posts, and 404 pages.
3. Use conditionals to create dynamic templates.

Let’s unlock the blueprint of your site!

---

Part 1: What is the Template Hierarchy?

The Template Hierarchy is WordPress’s system for selecting the right template to display a page. For example:

• A blog post uses single-post.html.
• A category archive uses category.html.
• If those don’t exist, WordPress falls back to index.html.

In FSE:

• Templates are HTML files (not PHP) built with blocks.
• You edit them visually via the Site Editor.

Example:

• When someone views a blog post, FSE looks for:
  single-post.html → single.html → index.html.

---

Part 2: Mapping Classic Templates to FSE

Here’s how FSE’s block templates replace classic PHP files:

Classic Template	FSE Block Template	Purpose
header.php	header.html (Template Part)	Site header.
single.php	single.html	Individual blog posts.
archive.php	archive.html	Category/tag/author archives.
404.php	404.html	“Page not found” error page.

Key Difference:

• Classic themes use PHP logic; FSE uses block markup and the Site Editor.

---

Part 3: Customizing Templates in the Site Editor

Let’s edit the single.html template (for blog posts):

1. Open the Site Editor:
   • Go to Appearance → Editor → Templates.
2. Locate the Template:
   • Search for “Single” or filter by “Posts.”
3. Edit with Blocks:
   • Add a Post Title block, Featured Image, and Post Content block.
   • Insert a Query Loop block to show related posts at the bottom.
4. Save Changes:
   • Click Save (top-right). All future posts will follow this layout!

Pro Tip: Use Template Parts (e.g., headers/footers) to keep designs consistent.

---

Part 4: Creating Custom Templates

Want a unique layout for a specific category or page?

1. Add a New Template:
   • In the Site Editor, click + Add New Template (top-right).
   • Choose a template type (e.g., “Category,” “Author”).
2. Assign to a Specific Page/Post Type:
   • For example:
     • Name: “Travel Category.”
     • Assign to the “Travel” category.
3. Design with Conditionals:
   • Use the Conditional Display settings (block sidebar) to show/hide blocks based on:
     • Post type, category, tags, or author.

Example: Show a map block only on posts in the “Travel” category.

---

Part 5: Troubleshooting Template Conflicts

If a page isn’t using the right template:

1. Check the Hierarchy:
   • WordPress uses the most specific template available.
   • Example: category-travel.html overrides category.html.
2. Reset to Theme Defaults:
   • Open the template, click ⋮ (top-right) → Reset to default theme.
3. Clear Caching Plugins:
   • Cached versions might show old templates.

---

FAQs

Q: Can I create templates for custom post types (e.g., Portfolios)?
A: Yes! Install a plugin like Custom Post Type UI and assign templates via Add New Template → Custom Post Type.

Q: How do I edit the 404 page?
A: Navigate to Templates → 404 in the Site Editor. Add a friendly message, search bar, or navigation links.

Q: What if I delete a template?
A: WordPress will fall back to the next template in the hierarchy (e.g., index.html).

---

What’s Next?

You’ve just taken control of your site’s architecture! In Post 8, we’ll dive into creating custom templates from scratch, including:

• Designing a portfolio template.
• Using dynamic data (e.g., author bios, related posts).
• Combining templates with advanced block patterns.

For now, experiment with:

• Adding an “About the Author” section to single.html.
• Creating a custom template for your “News” category.

---

Conclusion

The Template Hierarchy isn’t just a technical concept—it’s your roadmap to designing intentional, purpose-built layouts. With FSE, you’re not just following WordPress’s rules; you’re rewriting them to fit your vision.

Ready to become a template wizard? Let’s craft something extraordinary in the next post!

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