Ep.018 Finalizing Content Structure & Template Associations in the Versana WordPress Block Theme

In this lesson, we finalize the content and template structure of the Versana wordpress block theme. We configure theme.json template associations, create demo pages, and prepare the theme before entering the full design phase.

Views: 4

Welcome back to the Versana WordPress Block Theme Development Course! We’ve already built all the key structural elements of our block theme—templates, template parts, patterns, and basic global settings. But before we jump into CSS and theme design, there’s a crucial step we must complete:

  • Finalizing all WordPress Block Theme Templates
  • Linking templates to page types via theme.json
  • Creating demo pages for each template
  • Preparing content structures for the upcoming design phase

This post ensures your theme is structurally perfect before styling begins.

Registering WordPress Block Theme Templates in theme.json

Add this block inside your theme.json:

{
  "version": 2,
  "customTemplates": [
		{
			"name": "blocks-demo",
			"title": "Blocks Demo",
			"postTypes": ["page"]
		},
        {
			"name": "blog",
			"title": "Custom Blog",
			"postTypes": ["page"]
		}
	]
}

Step-by-Step Explanation

1. postTypes

Controls which content type can use the template. Without this, WordPress won’t expose templates in the page editor.

2. title

Human-readable label displayed in the editor.

3. name

The file name of the template e.g. blocks-demo if the file name is blocks-demo.html in templates folder.

4. Automatic Template Exposure

Even if WordPress hierarchy already uses these templates, registering them ensures they appear in editor dropdowns. Registering templates improves usability and helps creators use the theme more intuitively.

3. Creating Demo Pages for Every Template

To prepare for the design phase, we create a demo page for each major template:

Template FileDemo PagePurpose
front-page.htmlHomeShowcase hero sections, intro blocks
page.htmlAboutLayout testing
blocks-demo.htmlBlocks Demo PageShowcase the appearance of each block
blog.htmlBlogLatest posts test

This provides realistic data for designing every part of the theme.

5. Testing Template Routing & Template Associations

Once templates and demo pages are ready, test:

✔ Front page → uses front-page.html

✔ Blog page → uses home.html

✔ Single post → loads single.html

✔ Category/tag pages → use archive.html

✔ Pages → use page.html

✔ Block Demo page → available in Template dropdown

This confirms your WordPress Block Theme Templates are functioning perfectly.

📁 6. Final Theme Structure Before CSS Design

Your Versana theme should now look like:

versana/
│
├── style.css
├── theme.json
├── functions.php
│
├── templates/
│   ├── index.html
│   ├── front-page.html
│   ├── home.html
│   ├── single.html
│   ├── page.html
│   ├── archive.html
│   ├── landing.html
│
├── parts/
│   ├── header.html
│   ├── footer.html
│
├── patterns/
│   ├── hero-banner.php

This is the complete structural foundation of a modern WordPress block theme.

🎉 Conclusion

You have now finalized your WordPress Block Theme Templates, created content-rich demo pages, and prepared the Versana theme for the design phase.

With templates properly registered in theme.json and demo content in place, you are ready to begin the creative stage of theme development.

🧩 What’s Next

In the next post, we begin the full design phase, where we style:

  • Typography
  • Colors
  • Layouts
  • Patterns
  • Template parts
  • Responsive behavior

This will transform the Versana theme from a structural framework into a polished, professional, production-ready block theme.

📚 References

Tags

Related Posts

Leave a Reply