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.

Practice

1. What is the main purpose of using wp_head and wp_footer hooks in WordPress?

easy

A. To change the site's main menu items

B. To add custom content or scripts to the header and footer sections of a site

C. To create new pages in WordPress

D. To delete default WordPress themes

Solution

1. Step 1: Understand the role of hooks

   Hooks like wp_head and wp_footer allow adding extra code to header and footer areas.

2. Step 2: Identify their use

   They are used to insert custom HTML, CSS, or JavaScript in those sections without editing theme files directly.

3. Final Answer:

   To add custom content or scripts to the header and footer sections of a site -> Option B

4. Quick Check:

   wp_head and wp_footer add content to header/footer [OK]

Hint: Remember hooks add code to header/footer areas [OK]

Common Mistakes:

• Thinking hooks create pages
• Confusing hooks with menu settings
• Assuming hooks delete themes

2. Which of the following is the correct way to add a custom script to the footer using wp_footer hook in your theme's functions.php?

easy

A. add_action('wp_footer', function() { echo ''; });

B. add_action('wp_head', function() { echo ''; });

C. add_filter('wp_footer', function() { echo ''; });

D. add_action('footer', function() { echo ''; });

Solution

1. Step 1: Identify correct hook and function

   The wp_footer hook is used with add_action to add code to the footer.

2. Step 2: Check syntax correctness

   add_action('wp_footer', function() { echo ''; }); uses add_action('wp_footer', function() { ... }); which is correct syntax to add inline script.

3. Final Answer:

   add_action('wp_footer', function() { echo '<script>alert("Hi")</script>'; }); -> Option A

4. Quick Check:

   Use add_action with wp_footer for footer scripts [OK]

Hint: Use add_action with wp_footer to add footer code [OK]

Common Mistakes:

• Using add_filter instead of add_action
• Using wp_head instead of wp_footer for footer scripts
• Using non-existent 'footer' hook

3. Given this code in functions.php:

add_action('wp_head', function() { echo '<meta name="custom" content="123">'; });

What will this code do when the site loads?

medium

A. Add a meta tag inside the footer section

B. Add a visible text 'custom 123' at the top of the page

C. Cause a syntax error and break the site

D. Add a meta tag with name 'custom' and content '123' inside the <head> section

Solution

1. Step 1: Understand wp_head hook behavior

   The wp_head hook inserts code inside the <head> tag of the HTML document.

2. Step 2: Analyze the echo statement

   The code outputs a meta tag with name 'custom' and content '123' which will be placed inside <head>.

3. Final Answer:

   Add a meta tag with name 'custom' and content '123' inside the <head> section -> Option D

4. Quick Check:

   wp_head adds code inside <head> [OK]

Hint: wp_head adds code inside head tag, not visible on page [OK]

Common Mistakes:

• Thinking it adds content to footer
• Expecting visible text on page
• Assuming code causes error

4. You added this code to your theme's functions.php:

add_action('wp_footer', function() { echo '<div>Footer Text</div>'; });

But the footer text does not appear on your site. What is the most likely reason?

medium

A. The theme does not call wp_footer() function in its footer.php file

B. You used add_action instead of add_filter

C. The code should be added to wp_head hook instead

D. You need to clear browser cache to see changes

Solution

1. Step 1: Check theme support for wp_footer

   The wp_footer() function must be called in the theme's footer.php to output footer hook content.

2. Step 2: Understand why content is missing

   If wp_footer() is missing, the hook callback won't run and content won't show.

3. Final Answer:

   The theme does not call wp_footer() function in its footer.php file -> Option A

4. Quick Check:

   wp_footer() call needed to show footer hook content [OK]

Hint: Ensure theme calls wp_footer() to display footer hook content [OK]

Common Mistakes:

• Confusing add_action with add_filter
• Adding footer code to wp_head hook
• Ignoring theme template structure

5. You want to add a custom header message only on the homepage and a footer copyright notice on all pages. Which is the best way to do this in your theme's functions.php?

hard

A. Use add_filter instead of add_action for both hooks

B. Add both messages inside wp_footer hook without conditions

C. Use add_action('wp_head', function() { if (is_front_page()) echo '<div>Welcome Home!</div>'; }); and add_action('wp_footer', function() { echo '<div>© 2024 MySite</div>'; });

D. Add both messages inside wp_head hook without conditions

Solution

1. Step 1: Use conditional check for homepage header

   Use is_front_page() inside wp_head hook to add header message only on homepage.

2. Step 2: Add footer message on all pages

   Use wp_footer hook without condition to add footer copyright on every page.

3. Final Answer:

   Use add_action('wp_head', function() { if (is_front_page()) echo '<div>Welcome Home!</div>'; }); and add_action('wp_footer', function() { echo '<div>© 2024 MySite</div>'; }); -> Option C

4. Quick Check:

   Use conditional in wp_head, unconditional in wp_footer [OK]

Hint: Use is_front_page() condition inside wp_head hook [OK]

Common Mistakes:

• Adding all messages unconditionally
• Using add_filter instead of add_action
• Putting footer message in wp_head hook