Header, footer, and sidebar templates in Wordpress - Mini Project: Build & Apply

Header, footer, and sidebar templates

📖 Scenario: You are building a simple WordPress theme for a blog. The blog needs a consistent header, footer, and sidebar on every page. These parts will be created as separate template files so WordPress can include them easily.

🎯 Goal: Create the basic WordPress theme structure with separate header.php, footer.php, and sidebar.php template files. Then include these templates in the main index.php file to build a complete page layout.

📋 What You'll Learn

Create a header.php file with a site title inside a <header> tag

Create a footer.php file with copyright text inside a <footer> tag

Create a sidebar.php file with a simple navigation menu inside an <aside> tag

In index.php, include the header, sidebar, and footer templates using WordPress functions

💡 Why This Matters

🌍 Real World

WordPress themes use separate template files for header, footer, and sidebar to keep code organized and reusable across pages.

💼 Career

Knowing how to build and include WordPress templates is essential for WordPress theme development jobs and freelance projects.

1

Create the header template

Create a file called header.php and add a <header> element containing an <h1> with the text My WordPress Blog.

Wordpress

# Create header.php with a header tag and h1 text

# Your code here

Need a hint?

Use HTML tags <header> and <h1> with the exact text.

2

Create the footer template

Create a file called footer.php and add a <footer> element containing the text © 2024 My WordPress Blog.

Wordpress

# Create footer.php with a footer tag and copyright text

# Your code here

Need a hint?

Use the <footer> tag with the exact copyright text.

3

Create the sidebar template

Create a file called sidebar.php and add an <aside> element containing a navigation menu with three links: Home, About, and Contact. Use an unordered list <ul> with list items <li> and anchor tags <a> with href set to #.

Wordpress

# Create sidebar.php with an aside tag and a nav menu with 3 links

# Your code here

Need a hint?

Use <aside> with a <nav> containing a <ul> list of links.

4

Include templates in index.php

Create index.php and include the header, sidebar, and footer templates using WordPress functions get_header(), get_sidebar(), and get_footer() in that order.

Wordpress

# Create index.php and include header, sidebar, and footer templates

# Your code here

Need a hint?

Use the WordPress template functions get_header(), get_sidebar(), and get_footer() in index.php.