---
tags:
  - wordpress
  - fse
  - templates
  - hierarchy
  - front-page
title: FSE Template Hierarchy: Front Page vs. Home
---

# 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:
1.  **Homepage (`/`):** A custom landing page with a Hero section, features, and a call to action.
2.  **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.

```html
<!-- 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.

```html
<!-- 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.

1.  Go to **Settings > Reading**.
2.  **Your homepage displays:** Select **A static page**.
3.  **Homepage:** Select your "Home" or "Welcome" page.
    *   WordPress will render this using `front-page.html`.
4.  **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).