Header, footer, and sidebar templates in Wordpress - Step-by-Step Execution

Concept Flow - Header, footer, and sidebar templates

Start WordPress Theme

↓

Load header.php

↓

Render Header Content

↓

Load main template content

↓

Load sidebar.php

↓

Render Sidebar Content

↓

Load footer.php

↓

Render Footer Content

↓

Page fully rendered

WordPress loads header, main content, sidebar, and footer templates in order to build a complete page.

Execution Sample

Wordpress

<?php get_header(); ?>
<main>Main content here</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

This code loads the header, main content, sidebar, and footer templates in a WordPress theme.

Execution Table

Step	Action	Template Loaded	Content Rendered
1	Call get_header()	header.php	Header HTML output
2	Render main content	N/A	Main content HTML
3	Call get_sidebar()	sidebar.php	Sidebar HTML output
4	Call get_footer()	footer.php	Footer HTML output
5	Page complete	N/A	Full page HTML ready

💡 All template parts loaded and rendered, page output complete.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
header_loaded	false	true	true	true	true	true
sidebar_loaded	false	false	false	true	true	true
footer_loaded	false	false	false	false	true	true
page_content	empty	header HTML	header + main HTML	header + main + sidebar HTML	header + main + sidebar + footer HTML	full page HTML

Key Moments - 3 Insights

Why does get_header() load before main content?

Because WordPress expects the header template to be output first to set up the page structure, as shown in execution_table step 1.

What happens if get_sidebar() is missing?

The sidebar content won't appear, but the page still renders header, main, and footer as seen in execution_table steps 1, 2, and 4.

Can footer.php be loaded before sidebar.php?

No, the typical flow loads sidebar before footer to maintain page layout order, as shown in execution_table steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what template is loaded at step 3?

A header.php

B sidebar.php

C footer.php

D main content

💡 Hint

Check the 'Template Loaded' column for step 3 in execution_table.

At which step is the footer.php template loaded?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Action' column in execution_table for when get_footer() is called.

If get_sidebar() is removed, which variable in variable_tracker stays false after step 4?

A sidebar_loaded

B footer_loaded

C header_loaded

D page_content

💡 Hint

Check the 'sidebar_loaded' row in variable_tracker to see when it changes to true.

Concept Snapshot

WordPress templates load in order: header.php, main content, sidebar.php, footer.php.
Use get_header(), get_sidebar(), get_footer() functions to include these parts.
Header sets up page start; footer closes it.
Sidebar adds extra content alongside main.
Missing parts still render page but layout changes.

Full Transcript

In WordPress themes, pages are built by loading template parts in a specific order. First, the header.php file is loaded using get_header(), which outputs the top part of the page including navigation and site title. Next, the main content is rendered directly in the template file. Then, get_sidebar() loads sidebar.php, which usually contains widgets or extra links. Finally, get_footer() loads footer.php to output the bottom part of the page. This flow ensures the page structure is complete and consistent. Variables like header_loaded, sidebar_loaded, and footer_loaded track which parts have been included. If a part like the sidebar is missing, the page still shows but without that section. Understanding this order helps in customizing WordPress themes effectively.

Practice

1. What is the main purpose of using get_header(), get_sidebar(), and get_footer() in a WordPress theme?

easy

A. To register new WordPress plugins

B. To create new posts automatically

C. To add custom CSS styles to the theme

D. To include reusable template parts like header, sidebar, and footer in theme files

Solution

1. Step 1: Understand the function roles

   get_header(), get_sidebar(), and get_footer() are WordPress functions used to include specific parts of a theme.

2. Step 2: Identify their purpose

   These functions help insert reusable parts like the header, sidebar, and footer into theme templates, making the site organized and easier to maintain.

3. Final Answer:

   To include reusable template parts like header, sidebar, and footer in theme files -> Option D

4. Quick Check:

   Reusable template parts = D [OK]

Hint: Remember these functions insert common page sections [OK]

Common Mistakes:

• Thinking these functions create posts
• Confusing them with CSS or plugin functions
• Assuming they add styles instead of templates

2. Which of the following is the correct way to include the sidebar template in a WordPress theme file?

easy

A. load_sidebar();

B. include_sidebar();

C. get_sidebar();

D. sidebar_include();

Solution

1. Step 1: Recall WordPress template functions

   The correct WordPress function to include the sidebar template is get_sidebar().

2. Step 2: Check syntax correctness

   Functions like include_sidebar(), load_sidebar(), or sidebar_include() do not exist in WordPress.

3. Final Answer:

   get_sidebar(); -> Option C

4. Quick Check:

   Sidebar inclusion function = A [OK]

Hint: Use get_sidebar() exactly to include sidebar templates [OK]

Common Mistakes:

• Using non-existent functions like include_sidebar()
• Forgetting parentheses after function name
• Confusing with PHP include statements

3. Given the following WordPress theme file snippet, what will be the output behavior?

<?php get_header(); ?>
<main>Content here</main>
<?php get_footer(); ?>

medium

A. Only the main content will display, header and footer missing

B. The page will display the header, main content, and footer sections

C. The page will show an error because get_footer() is missing arguments

D. Only header and footer will display, main content ignored

Solution

1. Step 1: Understand get_header() and get_footer() usage

   These functions include the header.php and footer.php template parts respectively.

2. Step 2: Analyze the snippet structure

   The snippet calls get_header(), then outputs main content inside <main>, then calls get_footer(). This means all three parts will appear on the page.

3. Final Answer:

   The page will display the header, main content, and footer sections -> Option B

4. Quick Check:

   Header + main + footer = B [OK]

Hint: get_header() and get_footer() wrap main content automatically [OK]

Common Mistakes:

• Assuming get_footer() needs arguments
• Thinking main content is ignored
• Believing header/footer won't show without extra code

4. You added get_sidebar(); in your theme file, but the sidebar does not appear on the site. What is the most likely cause?

medium

A. The sidebar.php template file is missing from the theme folder

B. You forgot to call get_header(); before get_sidebar();

C. The get_sidebar(); function requires parameters to work

D. WordPress does not support sidebars by default

Solution

1. Step 1: Check sidebar template existence

   get_sidebar(); includes sidebar.php by default. If this file is missing, nothing will show.

2. Step 2: Evaluate other options

   Calling get_header(); is not required before sidebar. get_sidebar(); works without parameters. WordPress supports sidebars by default.

3. Final Answer:

   The sidebar.php template file is missing from the theme folder -> Option A

4. Quick Check:

   Missing sidebar.php = A [OK]

Hint: Check if sidebar.php exists when sidebar is missing [OK]

Common Mistakes:

• Assuming get_sidebar() needs parameters
• Thinking header must be called first
• Believing WordPress lacks sidebar support

5. You want to create a custom footer template named footer-special.php and include it only on the homepage. Which code snippet correctly includes this custom footer in your theme's index.php?

hard

A. if (is_front_page()) { get_footer('special'); } else { get_footer(); }

B. get_footer('special'); if (is_front_page()) { get_footer(); }

C. get_footer(); if (is_front_page()) { get_footer('special'); }

D. if (is_home()) { get_footer(); } else { get_footer('special'); }

Solution

1. Step 1: Understand get_footer() with parameters

   Calling get_footer('special') loads footer-special.php. Without parameters, it loads footer.php.

2. Step 2: Use conditional to check homepage

   is_front_page() returns true on the homepage. So, use it to load the special footer only there, else load default footer.

3. Step 3: Analyze options

   if (is_front_page()) { get_footer('special'); } else { get_footer(); } correctly uses the conditional to load footer-special.php on homepage and default footer elsewhere. Other options call footers incorrectly or in wrong order.

4. Final Answer:

   if (is_front_page()) { get_footer('special'); } else { get_footer(); } -> Option A

5. Quick Check:

   Conditional footer load = C [OK]

Hint: Use get_footer('name') with condition for custom footers [OK]

Common Mistakes:

• Calling both footers unconditionally
• Using is_home() instead of is_front_page() for homepage
• Reversing the conditional logic