Bird
Raised Fist0
Wordpressframework~20 mins

Header and footer customization in Wordpress - Practice Problems & Coding Challenges

Choose your learning style10 modes available

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Challenge - 5 Problems
šŸŽ–ļø
Header & Footer Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
ā“ component_behavior
intermediate
2:00remaining
What is the output of this WordPress header customization code?
Consider this code snippet added to a WordPress theme's header.php file. What will the visitor see in the browser's header area?
Wordpress
<?php
function custom_header_text() {
  echo '<h1>Welcome to My Site</h1>';
}
add_action('wp_head', 'custom_header_text');
?>
AThe text 'Welcome to My Site' appears at the top of the page body as a visible heading.
BThe text 'Welcome to My Site' appears inside the HTML <head> section, not visible on the page body.
CNothing appears because the function is hooked to the wrong action and never runs.
DA PHP error occurs because the function is missing a return statement.
Attempts:
2 left
šŸ’” Hint
Think about where the 'wp_head' action runs in the HTML structure.
ā“ state_output
intermediate
2:00remaining
What will be the footer output after this WordPress code runs?
This code is added to a theme's functions.php to customize the footer. What will the visitor see at the bottom of the page?
Wordpress
<?php
function add_custom_footer() {
  echo '<p>Ā© 2024 My Company</p>';
}
add_action('wp_footer', 'add_custom_footer');
?>
ANothing appears because the hook 'wp_footer' is not called by default in themes.
BThe text appears inside the HTML <head> section, not visible on the page body.
CThe text 'Ā© 2024 My Company' appears at the bottom of the page body.
DA fatal error occurs because the function is not returning a value.
Attempts:
2 left
šŸ’” Hint
Remember where the 'wp_footer' action is triggered in WordPress themes.
šŸ“ Syntax
advanced
2:00remaining
Which option correctly registers a custom header menu in WordPress?
You want to add a new menu location called 'Header Menu' to your theme. Which code snippet correctly registers it?
Aregister_nav_menu('header-menu', 'Header Menu');
Bregister_nav_menus('header-menu', 'Header Menu');
Cregister_nav_menu(array('header-menu' => 'Header Menu'));
Dregister_nav_menus(array('header-menu' => 'Header Menu'));
Attempts:
2 left
šŸ’” Hint
Check the function name and parameter types carefully.
šŸ”§ Debug
advanced
2:00remaining
Why does this footer customization code cause a blank page?
This code is added to functions.php. Why does the site show a blank page after adding it?
Wordpress
<?php
add_action('wp_footer', 'custom_footer');
function custom_footer() {
  echo '<p>Footer Text</p>';
}
?>
AMissing semicolon after the echo statement causes a PHP parse error.
BThe function name 'custom_footer' conflicts with a WordPress core function.
CThe hook 'wp_footer' is misspelled and never runs.
DEchoing HTML inside functions.php is not allowed and causes errors.
Attempts:
2 left
šŸ’” Hint
Look carefully at the syntax inside the function.
🧠 Conceptual
expert
3:00remaining
Which statement best explains how to safely customize a WordPress theme's header and footer?
You want to add custom content to the header and footer without losing changes when the theme updates. What is the best approach?
AUse a child theme to override <code>header.php</code> and <code>footer.php</code> and add your customizations there.
BDirectly edit the theme's <code>header.php</code> and <code>footer.php</code> files to add your content.
CAdd your custom header and footer content inside the WordPress admin Appearance > Customize > Header/Footer sections.
DInstall a plugin that disables the theme's header and footer and replaces them with your own.
Attempts:
2 left
šŸ’” Hint
Think about how to keep your changes safe from theme updates.

Practice

(1/5)
1. What is the main purpose of using get_header() and get_footer() functions in a WordPress theme?
easy
A. To delete the header and footer sections from a page
B. To add custom CSS styles to the header and footer
C. To register new header and footer menus
D. To include the header and footer template files in a theme's page

Solution

  1. Step 1: Understand the role of get_header() and get_footer()

    These functions load the header.php and footer.php template files into the current page template.
  2. Step 2: Identify their purpose in theme structure

    They help keep the header and footer code separate and reusable across pages.
  3. Final Answer:

    To include the header and footer template files in a theme's page -> Option D
  4. Quick Check:

    Include header/footer = A [OK]
Hint: Remember: get_header() loads header.php, get_footer() loads footer.php [OK]
Common Mistakes:
  • Thinking these functions add CSS styles
  • Confusing with menu registration functions
  • Assuming they remove sections instead of adding
2. Which of the following is the correct way to include a custom header file named header-special.php in a WordPress theme template?
easy
A. include('header-special.php');
B. get_header('special');
C. get_template_part('header-special');
D. load_header('special');

Solution

  1. Step 1: Recall how to load custom header files

    WordPress uses get_header('name') to load header-name.php.
  2. Step 2: Match the function to the file name

    For header-special.php, call get_header('special').
  3. Final Answer:

    get_header('special'); -> Option B
  4. Quick Check:

    Custom header call = B [OK]
Hint: Use get_header('name') to load header-name.php files [OK]
Common Mistakes:
  • Using include() instead of get_header()
  • Confusing get_template_part() with get_header()
  • Using non-existent functions like load_header()
3. Consider this WordPress theme template snippet:
<?php get_header(); ?>
<main>Content here</main>
<?php get_footer(); ?>

What will be the output on the webpage if header.php contains a <header> with "Welcome" text and footer.php contains a <footer> with "Goodbye" text?
medium
A. The page will show an error because get_header() and get_footer() need parameters
B. Only the main content will show, header and footer are ignored
C. The page will show a header with "Welcome", main content, and a footer with "Goodbye"
D. The page will show "Welcome" and "Goodbye" but no main content

Solution

  1. Step 1: Understand what get_header() and get_footer() do

    They insert the contents of header.php and footer.php respectively into the page.
  2. Step 2: Combine the template parts

    The page will display the header content "Welcome", then the main content, then the footer content "Goodbye".
  3. Final Answer:

    The page will show a header with "Welcome", main content, and a footer with "Goodbye" -> Option C
  4. Quick Check:

    Header + main + footer = D [OK]
Hint: get_header() and get_footer() add their files' content around main [OK]
Common Mistakes:
  • Thinking main content is replaced or ignored
  • Assuming parameters are required for these functions
  • Expecting an error without parameters
4. You added get_footer('custom'); in your theme template, but the footer does not appear and the page shows an error. What is the most likely cause?
medium
A. The file footer-custom.php does not exist in the theme folder
B. You must use get_footer() without parameters always
C. The function get_footer() cannot load custom footers
D. You need to register the custom footer in functions.php first

Solution

  1. Step 1: Understand how get_footer('name') works

    It tries to load footer-name.php from the theme folder.
  2. Step 2: Identify the cause of error

    If footer-custom.php is missing, WordPress cannot find the file and throws an error.
  3. Final Answer:

    The file footer-custom.php does not exist in the theme folder -> Option A
  4. Quick Check:

    Missing footer-custom.php = A [OK]
Hint: Check if footer-custom.php file exists before calling get_footer('custom') [OK]
Common Mistakes:
  • Thinking parameters are not allowed in get_footer()
  • Assuming registration is needed for custom footers
  • Ignoring missing file errors
5. You want to create a WordPress theme where the header shows a different logo on the homepage and another logo on all other pages. Which is the best way to customize the header for this?
hard
A. Create two header files: header-home.php and header.php, then use get_header() or get_header('home') conditionally
B. Add both logos in header.php and use CSS to hide/show based on page
C. Use JavaScript to swap logos after the page loads
D. Create a footer file with the logos and include it instead of header

Solution

  1. Step 1: Understand conditional header loading

    WordPress allows loading different header files using get_header('name').
  2. Step 2: Apply conditional logic in template

    Use PHP to check if it is the homepage, then call get_header('home'), else get_header().
  3. Step 3: Organize header files

    Create header-home.php with the homepage logo and header.php with the default logo.
  4. Final Answer:

    Create two header files: header-home.php and header.php, then use get_header() or get_header('home') conditionally -> Option A
  5. Quick Check:

    Conditional header files = C [OK]
Hint: Use get_header('home') for homepage, get_header() for others [OK]
Common Mistakes:
  • Trying to swap logos only with CSS or JavaScript
  • Putting logos in footer instead of header
  • Not using conditional PHP logic for headers