Custom headers and footers in Wordpress - Step-by-Step Execution

Concept Flow - Custom headers and footers

Start WordPress Theme

↓

Load header.php

↓

Render header content

↓

Load main content

↓

Load footer.php

↓

Render footer content

↓

Page fully rendered

WordPress loads header.php first, then main content, then footer.php to build the full page.

Execution Sample

Wordpress

<?php get_header(); ?>
<main>
  <h1>Welcome</h1>
</main>
<?php get_footer(); ?>

This code loads the header, shows main content, then loads the footer.

Execution Table

Step	Action	File Loaded	Content Rendered	Notes
1	Call get_header()	header.php	Header HTML output	Header template loaded and displayed
2	Render main content	N/A	<main><h1>Welcome</h1></main>	Main page content shown
3	Call get_footer()	footer.php	Footer HTML output	Footer template loaded and displayed
4	Page complete	N/A	Full page with header, main, footer	Rendering finished

💡 All parts loaded and page fully rendered

Variable Tracker

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

Key Moments - 2 Insights

Why does get_header() load header.php and not main content?

get_header() specifically loads header.php as shown in execution_table step 1; main content is separate and rendered after.

Can I customize header.php and footer.php separately?

Yes, header.php and footer.php are separate files loaded independently (steps 1 and 3), so you can edit them individually.

Visual Quiz - 3 Questions

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

A header.php

B index.php

C footer.php

D functions.php

💡 Hint

Check the 'File Loaded' column at step 3 in execution_table

At which step is the main content rendered?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'Content Rendered' column to find main content rendering

If you remove get_footer() from the code, what changes in variable_tracker?

A header_loaded becomes false

B footer_loaded stays false, page_content misses footer HTML

C page_content becomes empty

D header_loaded becomes true later

💡 Hint

Check footer_loaded and page_content changes after step 3 in variable_tracker

Concept Snapshot

WordPress loads header.php with get_header() and footer.php with get_footer().
Main content is rendered between these calls.
Customize header and footer by editing their files.
This builds the full page in order: header, main, footer.
Use these functions to keep theme parts organized.

Full Transcript

In WordPress, pages are built by loading separate parts: header, main content, and footer. The function get_header() loads the header.php file which contains the top part of the page like logo and menu. Then the main content is shown, for example a welcome message inside a main tag. Finally, get_footer() loads footer.php which contains the bottom part like copyright info. This order ensures the page is complete and organized. You can customize header.php and footer.php separately to change how the top and bottom of your site look. The execution table shows each step: first header.php loads, then main content renders, then footer.php loads, and the page is done. Variables track which parts are loaded and how the page content grows. If you remove get_footer(), the footer does not load and the page content misses that part. This method keeps your theme clean and easy to manage.