Ep.014 Creating Custom Templates (Front Page, Blog, 404, Single, Archive, Page)

Views: 14

In this step-by-step guide, we’ll create essential templates for a complete WordPress block theme. Each template is explained right after its code block so you understand exactly what you’re building.

---

🧱 What Are Block Theme Templates?

Templates in WordPress block themes are individual HTML files stored inside the /templates/ folder. WordPress loads the appropriate one based on the Template Hierarchy. You can override default templates by adding specific ones like front-page.html, single.html, or 404.html.

---

📁 Updated Template Folder Structure

Inside versana/templates/, your structure should now look like:

index.html
front-page.html
home.html
single.html
page.html
archive.html
404.html

Let’s create each one.

---

1. front-page.html – Static Homepage

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:heading {"level":1} -->
  <h1>Welcome to Versana</h1>
  <!-- /wp:heading -->

  <!-- wp:paragraph -->
  <p>This is your homepage. Customize it via the Site Editor.</p>
  <!-- /wp:paragraph -->
</main>
<!-- /wp:group -->

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

Explanation:

• Loads the header template part at the top.
• Wraps the content inside a <main> tag using the Group block with a constrained layout.
• Adds a main heading and a paragraph for homepage content.
• Ends with the footer template part.

---

2. home.html – Blog Posts Page

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

<!-- wp:query-title {"type":"archive"} /-->

<!-- wp:query {"query":{"perPage":10}} -->
  <div class="wp-block-query">
    <!-- wp:post-template -->
      <!-- wp:post-title {"isLink":true} /-->
      <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->

    <!-- wp:query-pagination /-->
  </div>
<!-- /wp:query -->

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

Explanation:

• Displays the header and an archive-style title like “Latest Posts”.
• Runs a Query block to show 10 posts.
• Inside the post template, it shows the title (as a link) and an excerpt.
• Pagination is added for navigation.
• Footer is loaded at the end.

---

3. single.html – Single Blog Post

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

<!-- wp:post-title /-->
<!-- wp:post-content /-->
<!-- wp:comments /-->

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

Explanation:

• Header loads at the top.
• Displays the full title and content of a single blog post.
• Includes the comments block if enabled.
• Ends with the footer.

---

4. page.html – Static Pages (About, Contact, etc.)

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

<!-- wp:post-title /-->
<!-- wp:post-content /-->

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

Explanation:

• Very similar to single.html but used for WordPress pages.
• Loads header, displays the page title and content, then adds footer.

---

5. archive.html – Categories, Tags, Authors

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

<!-- wp:query-title /-->
<!-- wp:term-description /-->

<!-- wp:query -->
  <div class="wp-block-query">
    <!-- wp:post-template -->
      <!-- wp:post-title {"isLink":true} /-->
    <!-- /wp:post-template -->
  </div>
<!-- /wp:query -->

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

Explanation:

• Shows the archive header and term description (like category or tag info).
• Uses a Query block to display a list of post titles.
• Footer is loaded at the bottom.

---

6. 404.html – Not Found Page

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

<!-- wp:heading {"level":1} -->
<h1>404 – Page Not Found</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Oops! The page you're looking for doesn’t exist. Try going back to the homepage.</p>
<!-- /wp:paragraph -->

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

Explanation:

• Used when a page/post isn’t found.
• Displays a clear heading and a helpful message.
• Includes header and footer for layout consistency.

---

🧪 How to Test Your Templates

1. Go to Appearance → Editor
2. Click the WordPress logo (top-left) → Templates
3. Choose any template (e.g., 404, Page, Front Page) and preview your custom version

---