Custom headers and footers in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this WordPress header.php output?

Given this header.php snippet in a WordPress theme, what HTML will be rendered in the browser?

Wordpress

<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title('|', true, 'right'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
  <h1><?php bloginfo('name'); ?></h1>
  <nav><?php wp_nav_menu(['theme_location' => 'primary']); ?></nav>
</header>

A <!DOCTYPE html><html lang="en-US"><head><meta charset="UTF-8"><title>My Site |</title><!-- WordPress head content --></head><body class="home"><header><h1>My Site</h1><nav><!-- Primary menu items --></nav></header>

B <!DOCTYPE html><html><head><title>My Site</title></head><body><header><h1>My Site</h1></header>

C <html><head><meta charset="UTF-8"></head><body><header><h1>My Site</h1><nav></nav></header>

D <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>My Site</title></head><body><header><h1>My Site</h1><nav></nav></header>

💡 Hint

Look carefully at the functions that add language attributes, charset, and menu.

The code uses WordPress functions to add language attributes, charset, title with separator, and the primary menu inside the nav. Option A matches this output including the DOCTYPE and body classes.

❓ state_output

intermediate

What is the footer content after this WordPress footer.php runs?

Consider this footer.php snippet in a WordPress theme. What will be the visible footer content on the page?

Wordpress

<?php
?><footer>
  <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
  <?php wp_footer(); ?>
</footer>
</body>
</html>

A <footer><p>© 2024</p></footer>

B <footer><p>© <?php echo date('Y'); ?> My Site</p></footer>

C <footer><p>© 2023 My Site</p></footer>

D <footer><p>© 2024 My Site</p><!-- WordPress footer scripts --></footer>

💡 Hint

Remember PHP date('Y') returns the current year.

The PHP code outputs the current year dynamically and the site name from bloginfo('name'). wp_footer() adds scripts but does not change visible text. Option D matches the expected output.

📝 Syntax

advanced

Which option causes a syntax error in a WordPress header.php?

Identify which code snippet will cause a syntax error when used in a WordPress theme's header.php file.

A <?php language_attributes(); ?> inside <html> tag without echo

B <?php wp_nav_menu(['theme_location' => 'primary']); ?> correct syntax

C <?php echo get_bloginfo('name'); ?> missing semicolon

D <?php bloginfo('charset'); ?> missing semicolon

💡 Hint

Check for missing semicolons in PHP statements.

Option C is missing a semicolon after the echo statement, causing a syntax error. Options A and D are valid because language_attributes() and bloginfo() echo output by default. Option C is correct syntax.

🔧 Debug

advanced

Why does the custom footer not show the menu?

A developer added this code to footer.php to show a menu, but the menu does not appear on the site. What is the most likely cause?

Wordpress

<?php wp_nav_menu(['theme_location' => 'footer']); ?>

A wp_nav_menu() must be called in header.php only

B The 'footer' menu location is not registered in functions.php

C The menu items are empty, so nothing shows

D wp_nav_menu() requires a second argument for CSS classes

💡 Hint

Check if the theme supports the menu location used.

If the menu location 'footer' is not registered in the theme's functions.php with register_nav_menus(), wp_nav_menu() will not display anything. The other options are incorrect because wp_nav_menu() can be used anywhere, empty menus show fallback, and CSS classes are optional.

🧠 Conceptual

expert

How does WordPress decide which header.php to load?

In a WordPress theme, multiple header files exist: header.php, header-home.php, and header-special.php. Which function call loads header-special.php?

A get_header('special');

B include('header-special.php');

C get_header();

D get_header('home');

💡 Hint

Check how get_header() uses its parameter to load custom header files.

Calling get_header('special') loads header-special.php if it exists. get_header() loads header.php by default. get_header('home') loads header-home.php. Direct include() is not recommended in WordPress themes.

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