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

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

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

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

Hint

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

Practice

1. Which template file does WordPress use first when displaying a single blog post?

easy

A. archive.php

B. page.php

C. index.php

D. single-{post-type}.php

Solution

1. Step 1: Understand single post template priority

   WordPress first looks for single-{post-type}.php to display a single post of a custom or default post type.

2. Step 2: Recognize fallback templates

   If that file is missing, WordPress falls back to single.php or index.php, but the first choice is single-{post-type}.php.

3. Final Answer:

   single-{post-type}.php -> Option D

4. Quick Check:

   Single post uses single-{post-type}.php first [OK]

Hint: Single posts use single-{post-type}.php first [OK]

Common Mistakes:

• Confusing page.php with single post template
• Thinking archive.php is for single posts
• Assuming index.php is always used first

2. Which of the following is the correct template file name to display a category archive for category with slug 'news'?

easy

A. news.php

B. category-news.php

C. category.php

D. archive-news.php

Solution

1. Step 1: Identify category archive template naming

   WordPress uses category-{slug}.php to display a specific category archive page.

2. Step 2: Match slug to template

   For category slug 'news', the template file is category-news.php.

3. Final Answer:

   category-news.php -> Option B

4. Quick Check:

   Category archives use category-{slug}.php [OK]

Hint: Category archives use category-{slug}.php [OK]

Common Mistakes:

• Using archive-news.php which is invalid
• Confusing category.php as specific slug template
• Naming file as news.php which is not recognized

3. Given the following files in a theme: page-about.php, page.php, and index.php. Which template will WordPress use to display the About page?

medium

A. page-about.php

B. page.php

C. index.php

D. It will show a 404 error

Solution

1. Step 1: Check for page-specific template

   WordPress looks for page-{slug}.php first for pages, so page-about.php matches the About page slug.

2. Step 2: Understand fallback order

   If page-about.php exists, WordPress uses it before falling back to page.php or index.php.

3. Final Answer:

   page-about.php -> Option A

4. Quick Check:

   Page slug template overrides generic page.php [OK]

Hint: Page slug templates like page-about.php have priority [OK]

Common Mistakes:

• Choosing page.php ignoring slug-specific template
• Assuming index.php is used first
• Thinking About page shows 404 without template

4. You created a template file named single-post.php but WordPress still uses single.php to display posts. What is the likely problem?

medium

A. The file name should be single-post.php but WordPress uses single-{post-type}.php where {post-type} is the actual post type slug

B. The correct file name is single-post.php but it must be in a subfolder

C. The file should be named single.php for posts

D. WordPress does not support single-post.php templates

Solution

1. Step 1: Understand post type template naming

   WordPress uses single-{post-type}.php where {post-type} matches the post type slug exactly.

2. Step 2: Check post type slug for 'post'

   The default post type slug is 'post', so single-post.php is correct if the post type is 'post'. But if the post type is custom or named differently, the file name must match exactly.

3. Step 3: Identify common mistake

   If WordPress ignores single-post.php, it may be because the post type slug is not 'post' or the file is misplaced.

4. Final Answer:

   File name must match actual post type slug in single-{post-type}.php -> Option A

5. Quick Check:

   Template file must match post type slug exactly [OK]

Hint: Match single-{post-type}.php exactly to post type slug [OK]

Common Mistakes:

• Assuming single-post.php always works for posts
• Thinking file must be in a subfolder
• Believing WordPress ignores single-{post-type}.php files

5. You want to create a custom template for the tag archive page of the tag with slug 'featured'. Which template file name should you create to follow WordPress template hierarchy?

hard

A. archive-featured.php

B. tag.php

C. tag-featured.php

D. taxonomy-featured.php

Solution

1. Step 1: Identify tag archive template naming

   WordPress uses tag-{slug}.php for tag archive pages with specific slugs.

2. Step 2: Match slug to template file

   For the tag slug 'featured', the correct template file is tag-featured.php.

3. Step 3: Understand fallback templates

   If tag-featured.php is missing, WordPress falls back to tag.php or archive.php.

4. Final Answer:

   tag-featured.php -> Option C

5. Quick Check:

   Tag archives use tag-{slug}.php [OK]

Hint: Tag archives use tag-{slug}.php for custom tags [OK]

Common Mistakes:

• Using archive-featured.php which is invalid
• Confusing taxonomy-featured.php with tag template
• Assuming tag.php is always used for all tags