Wordpressframework~30 mins

Template parts in Wordpress - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

Create the footer template part

Wordpress


  Welcome to My Blog

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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