Custom headers and footers in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include the header template in a WordPress theme.

Wordpress

<?php [1]('header'); ?>

Drag options to blanks, or click blank then click option'

Aload_header

Binclude_header

Cget_header

Dheader_include

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function like include_header()

Trying to load header.php with PHP include() instead of get_header()

The get_header() function loads the header.php template in a WordPress theme.

2fill in blank

medium

Complete the code to include the footer template in a WordPress theme.

Wordpress

<?php [1]('footer'); ?>

Drag options to blanks, or click blank then click option'

Aget_footer

Bload_footer

Cinclude_footer

Dfooter_load

Attempts:

3 left

💡 Hint

Common Mistakes

Using include_footer() which is not a WordPress function

Trying to load footer.php with PHP include() instead of get_footer()

The get_footer() function loads the footer.php template in a WordPress theme.

3fill in blank

hard

Fix the error in the code to properly load a custom header named 'custom-header'.

Wordpress

<?php get_header([1]); ?>

Drag options to blanks, or click blank then click option'

A'custom-header'

Bcustom-header

Ccustom_header

D"custom-header"

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the name without quotes causing a syntax error

Using underscores instead of hyphens in the string

The parameter must be a string in quotes to specify the custom header template file like header-custom-header.php.

4fill in blank

hard

Fill both blanks to register and enqueue a custom stylesheet for the header in WordPress.

Wordpress

<?php
function custom_header_styles() {
    wp_enqueue_style([1], get_template_directory_uri() . '/css/[2].css');
}
add_action('wp_enqueue_scripts', 'custom_header_styles');
?>

Drag options to blanks, or click blank then click option'

A'custom-header-style'

B'header-style'

Ccustom-header-style

Dheader-style

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the style handle string

Using variable names instead of strings for the CSS file name

Use a string handle in quotes for the style name and the matching CSS file name as a string inside the path.

5fill in blank

hard

Fill all three blanks to create a custom footer function hooked to 'wp_footer' that outputs a copyright message.

Wordpress

<?php
function [1]() {
    echo '<p>&copy; ' . date([2]) . ' My Website</p>';
}
add_action([3], '[1]');
?>

Drag options to blanks, or click blank then click option'

Acustom_footer_message

B'Y'

C'wp_footer'

Dfooter_message

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong hook name instead of 'wp_footer'

Not quoting the date format string

Mismatch between function name in definition and add_action

The function name is custom_footer_message, the date format is 'Y' for the year, and the hook is 'wp_footer'.

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