A Comprehensive Guide to the WordPress Template Hierarchy (2021 Edition)

Started by 5uf2mevsch, Oct 01, 2024, 06:02 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.


worthwhiledaffie

The WordPress Template Hierarchy is the backbone of WordPress theme development. It determines which template files are used to display different types of content, such as posts, pages, archives, and custom post types.

Understanding this hierarchy helps developers customize themes efficiently and ensures WordPress loads the correct templates in the right order.

1️⃣ What Is the WordPress Template Hierarchy?
The template hierarchy is WordPress's built-in system that selects the best template file to display a given page. When a user requests a page, WordPress:
βœ… Looks for the most specific template file first
βœ… Falls back to a more general template if the specific file doesn't exist
βœ… Eventually defaults to index.php as the last option

πŸ’‘ Example:

If a user visits example.com/category/tech, WordPress will:
Look for category-tech.php
If not found, check category.php
If not found, use archive.php
If nothing is found, fallback to index.php
πŸš€ Result? WordPress always finds a way to display contentβ€”ensuring no broken pages.

2️⃣ The WordPress Template Hierarchy Chart (2025 Update)
Here's a visual representation of how WordPress selects templates:

πŸ“Œ Hierarchy Order for Different Pages:

πŸ“ Single Post (Blog Posts)
πŸ”Ή single-{post-type}-{slug}.php (e.g., single-product-phone.php)
πŸ”Ή single-{post-type}.php (e.g., single-product.php)
πŸ”Ή single.php
πŸ”Ή singular.php
πŸ”Ή index.php

πŸ“„ Static Pages (Custom Pages)
πŸ”Ή page-{slug}.php (e.g., page-about.php)
πŸ”Ή page-{id}.php (e.g., page-25.php)
πŸ”Ή page.php
πŸ”Ή singular.php
πŸ”Ή index.php

πŸ“‚ Category Pages
πŸ”Ή category-{slug}.php (e.g., category-tech.php)
πŸ”Ή category-{id}.php (e.g., category-4.php)
πŸ”Ή category.php
πŸ”Ή archive.php
πŸ”Ή index.php

🏷� Tag Pages
πŸ”Ή tag-{slug}.php
πŸ”Ή tag-{id}.php
πŸ”Ή tag.php
πŸ”Ή archive.php
πŸ”Ή index.php

πŸ‘₯ Author Pages
πŸ”Ή author-{username}.php
πŸ”Ή author.php
πŸ”Ή archive.php
πŸ”Ή index.php

πŸ“… Date-Based Archives
πŸ”Ή date.php
πŸ”Ή archive.php
πŸ”Ή index.php

πŸ”Ž Search Results
πŸ”Ή search.php
πŸ”Ή index.php

❌ 404 Error Pages
πŸ”Ή 404.php
πŸ”Ή index.php

πŸ’‘ Tip: If a template file doesn't exist, WordPress falls back to a more general fileβ€”ultimately landing on index.php.

3️⃣ Customizing the WordPress Template Hierarchy
Now that you understand the hierarchy, here's how to customize it for better control over your theme.

πŸ“Œ How to Override Default Templates:
βœ… Create a category-specific template β†’ category-tech.php
βœ… Customize a single post type β†’ single-product.php
βœ… Design a custom 404 page β†’ 404.php
βœ… Modify the author page layout β†’ author.php

πŸ’‘ Tip: Use get_template_part() to break templates into smaller reusable files!

4️⃣ Full Site Editing (FSE) & The Future of the Template Hierarchy
With Full Site Editing (FSE), WordPress has introduced Block Themes, changing how templates work.

πŸ“Œ How FSE Changes the Hierarchy:
βœ… No need for PHP templates – Everything is built using block templates
βœ… Templates & Parts – Edit layouts visually in the Site Editor
βœ… theme.json – Controls global styles (colors, fonts, layout)

πŸ’‘ Traditional PHP themes still use the hierarchy, but FSE themes rely on block-based customization.

πŸ† Final Verdict: Why Mastering the Template Hierarchy Matters
Understanding the WordPress Template Hierarchy helps you:
βœ… Customize themes efficiently without breaking WordPress core
βœ… Create SEO-optimized, high-performing themes
βœ… Adapt to Full Site Editing (FSE) and future WordPress updates

Didn't find what you were looking for? Search Below