Template parts in Wordpress - Mini Project: Build & Apply

Using Template Parts in WordPress Theme Development

📖 Scenario: You are building a WordPress theme for a small blog. To keep your theme organized and reusable, you want to split your theme's header and footer into separate template parts.

🎯 Goal: Create a WordPress theme structure that uses get_template_part() to include separate header and footer template parts in the main template file.

📋 What You'll Learn

Create a header template part file named header-main.php with a simple header HTML structure

Create a footer template part file named footer-main.php with a simple footer HTML structure

In the main template file index.php, use get_template_part() to include the header and footer template parts

Ensure the main template file has a basic HTML structure with the included header and footer parts

💡 Why This Matters

🌍 Real World

WordPress themes often use template parts to organize code for headers, footers, sidebars, and other reusable sections. This makes themes easier to build and maintain.

💼 Career

Knowing how to use template parts is essential for WordPress theme developers and helps in creating modular, clean, and professional themes.

1

Create the header template part

Create a file named header-main.php and add a <header> element with the text "Welcome to My Blog" inside it.

Wordpress

# Create header-main.php with a header element and text

Hint

Use a <header> tag and put the exact text inside it.

2

Create the footer template part

Create a file named footer-main.php and add a <footer> element with the text "© 2024 My Blog" inside it.

Wordpress

  Welcome to My Blog

Hint

Use a <footer> tag and put the exact copyright text inside it.

3

Include header and footer in the main template

In the index.php file, use get_template_part('header', 'main') to include the header template part and get_template_part('footer', 'main') to include the footer template part.

Wordpress

Hint

Use get_template_part() with the first argument as the base name and the second as the part name.

4

Complete the main template with HTML structure

Wrap the calls to get_template_part() inside a basic HTML5 structure in index.php. Add <!DOCTYPE html>, <html lang="en">, <head> with a <title>, and <body> tags. Place the header and footer inside the <body>.

Wordpress

  My Blog


  

Hint

Make sure to include all the basic HTML tags and place the PHP calls inside the <body>.

Practice

1. What is the main purpose of using get_template_part() in WordPress themes?

easy

A. To create database tables

B. To register new custom post types

C. To include reusable template parts and keep code organized

D. To enqueue styles and scripts

Solution

1. Step 1: Understand the function role

   get_template_part() is designed to include reusable parts of a theme, like headers or footers.

2. Step 2: Compare with other options

   Registering post types, enqueuing scripts, and creating tables are unrelated to template parts.

3. Final Answer:

   To include reusable template parts and keep code organized -> Option C

4. Quick Check:

   Template parts = reusable code pieces [OK]

Hint: Remember: template parts reuse code pieces [OK]

Common Mistakes:

• Confusing template parts with post type registration
• Thinking it manages scripts or styles
• Assuming it handles database operations

2. Which of the following is the correct syntax to include a template part named 'content' with a specific variation 'single'?

easy

A. get_template_part('content', 'single');

B. get_template_part('single', 'content');

C. get_template_part('content-single');

D. get_template_part('content', single);

Solution

1. Step 1: Recall function parameters

   get_template_part() takes two string arguments: slug and optional name.

2. Step 2: Match correct order and syntax

   The correct call is get_template_part('content', 'single'); with both parameters as strings.

3. Final Answer:

   get_template_part('content', 'single'); -> Option A

4. Quick Check:

   Slug then name as strings [OK]

Hint: Use two strings: slug first, then name [OK]

Common Mistakes:

• Passing combined slug and name as one string
• Swapping slug and name order
• Forgetting quotes around name

3. Given the code snippet:

get_template_part('header');

What file will WordPress try to load first?

medium

A. header.php

B. header-header.php

C. header-single.php

D. header-template.php

Solution

1. Step 1: Understand default file naming

   When only slug is given, WordPress looks for {slug}.php file.

2. Step 2: Apply to example

   Slug is 'header', so WordPress loads header.php.

3. Final Answer:

   header.php -> Option A

4. Quick Check:

   Slug only loads slug.php [OK]

Hint: Slug alone loads slug.php file [OK]

Common Mistakes:

• Expecting a suffix like '-header' automatically
• Confusing with named template parts
• Assuming different file extensions

4. What is wrong with this code snippet?

get_template_part('footer', single);

medium

A. No issues, code works fine

B. Wrong function name, should be get_template_parts

C. Footer template parts cannot have a name

D. Missing quotes around 'single' causing a syntax error

Solution

1. Step 1: Check parameter types

   Both slug and name must be strings, so 'single' needs quotes.

2. Step 2: Identify error cause

   Without quotes, single is treated as a constant or variable, causing syntax error.

3. Final Answer:

   Missing quotes around 'single' causing a syntax error -> Option D

4. Quick Check:

   Strings need quotes [OK]

Hint: Always quote slug and name strings [OK]

Common Mistakes:

• Omitting quotes around name parameter
• Using wrong function name
• Thinking named parts are not allowed

5. You want to create a reusable sidebar template part with two variations: 'left' and 'right'. Which folder structure and code usage is correct to achieve this?

hard

A. Files: sidebar-left.php, sidebar-right.php inside /parts/ folder; Code: get_template_part('sidebar', 'left');

B. Files: sidebar-left.php, sidebar-right.php in theme root; Code: get_template_part('sidebar', 'left');

C. Files: sidebar.php only; Code: get_template_part('sidebar-left');

D. Files: sidebar-left.php, sidebar-right.php in theme root; Code: get_template_part('sidebar-left');

Solution

1. Step 1: Understand file naming for variations

   Named template parts use {slug}-{name}.php in theme root.

2. Step 2: Match code to file structure

   Calling get_template_part('sidebar', 'left'); loads sidebar-left.php.

3. Step 3: Evaluate other options

   B places files in subfolder without adjusting slug to include path; C uses only one file; D uses combined slug-name as one string incorrectly.

4. Final Answer:

   Files: sidebar-left.php, sidebar-right.php in theme root; Code: get_template_part('sidebar', 'left'); -> Option B

5. Quick Check:

   Slug-name files in root with two-string call [OK]

Hint: Use slug-name.php files in root, call with two strings [OK]

Common Mistakes:

• Placing files in subfolders without adjusting code
• Passing combined slug-name as one string
• Using only one file for multiple variations