Template hierarchy in Wordpress - Mini Project: Build & Apply

Understanding WordPress Template Hierarchy

📖 Scenario: You are building a simple WordPress theme. WordPress uses a system called template hierarchy to decide which template file to use for different pages on your site.In this project, you will create the basic template files and configure WordPress to use them correctly.

🎯 Goal: Create a WordPress theme folder with the main template files: index.php, single.php, and page.php. Then configure the theme to display the correct template based on the page type using WordPress template hierarchy.

📋 What You'll Learn

Create a file called index.php with a simple HTML structure and a message 'This is the index template'.

Create a file called single.php with a message 'This is the single post template'.

Create a file called page.php with a message 'This is the page template'.

Use WordPress functions to load the correct template based on the page type.

💡 Why This Matters

🌍 Real World

WordPress template hierarchy is how WordPress themes decide which file to use to display different types of content, like posts, pages, or archives.

💼 Career

Understanding template hierarchy is essential for WordPress theme developers to customize site appearance and behavior effectively.

1

Create the index.php template file

Create a file called index.php in your theme folder. Add a basic HTML structure with a <h1> heading that says exactly: This is the index template.

Wordpress

Need a hint?

Remember to include the <h1> tag with the exact text inside index.php.

2

Create the single.php template file

Create a file called single.php in your theme folder. Add a basic HTML structure with a <h1> heading that says exactly: This is the single post template.

Wordpress

Need a hint?

Make sure the heading text matches exactly inside single.php.

3

Create the page.php template file

Create a file called page.php in your theme folder. Add a basic HTML structure with a <h1> heading that says exactly: This is the page template.

Wordpress

Need a hint?

Check that the heading text is exactly as required inside page.php.

4

Use WordPress functions to load the correct template

In your theme folder, create a file called functions.php. Add a function hooked to template_include filter that returns single.php when viewing a single post, page.php when viewing a page, and index.php for all other cases. Use WordPress conditional tags is_single() and is_page() inside the function.

Wordpress

<?php
// Add a function hooked to 'template_include' filter
// Return 'single.php' if is_single(), 'page.php' if is_page(), else 'index.php'
// Your code here

Need a hint?

Use get_template_directory() to get the theme folder path and return the correct template file path based on the condition.