Views: 52
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
- Go to Appearance → Editor
- Open any page template
- You will now see the new Header and Footer available for editing
- You can:
- Add a logo
- Customize menu items
- Change footer text and layout
Everything stays dynamic, editable, and WordPress-native.
“See the official Template Part block documentation on WordPress.org.”
Why Reusable Header & Footer Matter in a WordPress Block Theme
Creating modular header and footer parts helps maintain a clean structure and enhances your development workflow—especially when working with a WordPress block theme like Versana. These template parts make your layouts consistent across all pages while still allowing flexibility via the Full Site Editor.
By organizing your theme with clearly separated header.html and footer.html inside a parts/ directory, you set the foundation for a scalable and maintainable WordPress site.
Benefits of Template Parts in WordPress Block Theme Development
Using a WordPress block theme with reusable template parts offers several advantages:
- 🔄 Reusability: Apply the same header and footer across multiple templates without rewriting code.
- 🎨 Customizability: Use the Site Editor to visually edit layout and blocks—no PHP required.
- 🚀 Speed: Make global changes to header/footer without touching every template.
- 🛠️ Cleaner Codebase: Keep your
index.html,single.html, etc. focused on page-specific structure.
How This Applies to Versana: A Practical WordPress Block Theme Example
Versana is a lightweight, block-first WordPress theme that perfectly demonstrates how powerful and intuitive the WordPress block theme system can be. With just a few steps, you can define a fully editable header and footer, making your site feel both modern and professional—without any plugin dependency or custom PHP functions.
Final Thoughts: Start Customizing Your WordPress Block Theme Today
Now that you’ve built reusable header.html and footer.html template parts in your Versana theme, you’re ready to take full control of your site’s layout using the Site Editor. Whether you’re a theme developer or a site builder, mastering this workflow is essential for working efficiently with any modern WordPress block theme.
WordPress Block Theme Development Guide
New to block themes? Check out our step-by-step guide to WordPress block theme development using the Versana Theme to learn the basics of building and customizing with Full Site Editing.
