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'.