Ep.013 Create Header & Footer Template Parts in WordPress Block Themes – Versana Theme Tutorial

Views: 1

In this tutorial, we’ll walk through building reusable header and footer template parts in your custom WordPress block theme — Versana. These parts help define consistent layouts across pages while keeping your templates clean and modular.

---

📁 Step 1: Create the parts/ Directory

In your theme folder, create a new subfolder named parts:

wp-content/themes/versana/parts/

This folder will store all your modular template files like header.html, footer.html, etc.

---

🧩 Step 2: Build header.html

Inside the parts/ folder, create a new file:

header.html

Paste the following starter code:

<!-- wp:group {"tagName":"header","layout":{"type":"constrained"}} -->
<header class="wp-block-group site-header">
  <!-- wp:site-title /-->
  <!-- wp:site-tagline /-->
  <!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right"}} /-->
</header>
<!-- /wp:group -->

This will output:

• Site title
• Tagline
• Responsive navigation menu (editable from the Site Editor)

✅ All blocks are 100% editable from the Full Site Editor UI.

---

🧩 Step 3: Build footer.html

Now, create:

footer.html

Paste the following code:

<!-- wp:group {"tagName":"footer","layout":{"type":"constrained"}} -->
<footer class="wp-block-group site-footer">
  <!-- wp:paragraph -->
  <p>© <script>document.write(new Date().getFullYear())</script> Versana Theme. All rights reserved.</p>
  <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

This basic footer includes:

• A copyright
• Room for future widgets, menus, or social links

---

🧱 Step 4: Reference in index.html

Now open your templates/index.html file and include your header and footer parts like this:

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:post-content /-->
</main>
<!-- /wp:group -->

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

✅ This connects your reusable parts with the layout of all default pages/posts.

---

🧪 Step 5: Test in the Site Editor

1. Go to Appearance → Editor
2. Open any page template
3. You will now see the new Header and Footer available for editing
4. You can:
   • Add a logo
   • Customize menu items
   • Change footer text and layout

Everything stays dynamic, editable, and WordPress-native.