FSE Template Hierarchy: Front Page vs. Home

One of the most confusing naming conventions in WordPress is the difference between "Front Page" and "Home". In Full Site Editing (FSE), understanding this distinction is critical to ensuring your Homepage and your Blog Feed display the correct layouts.

1. The Definitions

front-page.html: The template for the root URL of your site (example.com/). It applies regardless of whether you are showing "Latest Posts" or a "Static Page". It has the highest priority.
home.html: The template for the Blog Posts Index. Even though it is called "Home", it is specifically the design for the list of blog posts.

2. The Common Scenario

Most modern websites want:

Homepage (/): A custom landing page with a Hero section, features, and a call to action.
Blog (/blog): A standard grid of recent posts.

Step 1: Create `templates/front-page.html`

This file controls your homepage. Since it is the front page, you usually want to hard-code the layout (Hero, Services, About) rather than just dumping content.

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<main class="wp-block-group">
    <!-- Hero Section -->
    <!-- wp:cover {"url":"...","align":"full"} -->
    <div class="wp-block-cover alignfull">
        <!-- wp:heading {"textAlign":"center","level":1} -->
        <h1 class="has-text-align-center">Welcome to Our Agency</h1>
        <!-- /wp:heading -->
    </div>
    <!-- /wp:cover -->

    <!-- Services Section -->
    <!-- wp:group {"layout":{"type":"constrained"}} -->
    <div class="wp-block-group">
        <h2>Our Services</h2>
        <p>We build amazing FSE themes.</p>
    </div>
    <!-- /wp:group -->
</main>

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Step 2: Create `templates/home.html`

This file controls your Blog Feed. Even if your blog is located at /news or /journal, WordPress looks for home.html to render the list of posts.

<!-- wp:template-part {"slug":"header"} /-->

<main class="wp-block-group">
    <h1>Latest News</h1>

    <!-- The Main Query Loop (Inherit = true) -->
    <!-- wp:query {"inherit":true,"align":"wide"} -->
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
        <!-- /wp:post-template -->
        <!-- wp:query-pagination /-->
    <!-- /wp:query -->
</main>

<!-- wp:template-part {"slug":"footer"} /-->

3. The "Reading" Settings

For the files above to work as expected, you must configure WordPress correctly.

Go to Settings > Reading.
Your homepage displays: Select A static page.
Homepage: Select your "Home" or "Welcome" page.
- WordPress will render this using front-page.html.
Posts page: Select your "Blog" or "News" page.
- WordPress will render this using home.html.

4. Hierarchy Logic Summary

If front-page.html exists, it always wins for the root URL.

URL	File Priority 1	File Priority 2	File Priority 3
Domain Root (`/`)	`front-page.html`	`home.html` (if "Latest Posts") OR `page.html` (if "Static Page")	`index.html`
Blog Feed (`/blog`)	`home.html`	`index.html`	-

Pro Tip: If you delete front-page.html and set your site to "Your latest posts", WordPress will display the blog feed on the homepage using home.html (or index.html if home.html is missing).

Created: March 19, 2026 • Last Modified: March 19, 2026

Docs Login