Header and footer customization 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'

Aget_header

Binclude_header

Cload_header

Dheader_include

Attempts:

3 left

💡 Hint

Common Mistakes

Using PHP include instead of get_header()

Misspelling the function name

In WordPress themes, get_header() is used to include the header template.

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'

Aload_footer

Bget_footer

Cinclude_footer

Dfooter_load

Attempts:

3 left

💡 Hint

Common Mistakes

Using include or load functions instead of get_footer()

Typo in function name

The correct function to include the footer template in WordPress is get_footer().

3fill in blank

hard

Fix the error in the code to properly enqueue a custom stylesheet for the header.

Wordpress

function theme_styles() {
    wp_enqueue_style('custom-header', get_template_directory_uri() . '/css/[1]');
}
add_action('wp_enqueue_scripts', 'theme_styles');

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

Aheader_style.css

Bheaderstyle.css

Cheader-style.css

Dheaderstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the .css extension

Using underscores instead of hyphens if file name differs

The correct filename must include the extension .css and match the actual file name, here header-style.css.

4fill in blank

hard

Fill both blanks to register and enqueue a custom footer script in WordPress.

Wordpress

function add_footer_script() {
    wp_register_script('footer-script', get_template_directory_uri() . '/js/[1]', array(), null, [2]);
    wp_enqueue_script('footer-script');
}
add_action('wp_enqueue_scripts', 'add_footer_script');

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

Afooter.js

Btrue

Cfalse

Dfooter-script.js

Attempts:

3 left

💡 Hint

Common Mistakes

Using false instead of true for footer loading

Wrong file name or missing extension

The script file is usually named footer.js and the last parameter true loads the script in the footer.

5fill in blank

hard

Fill all three blanks to create a custom header template part and include it in the theme.

Wordpress

<?php
// In functions.php
function register_custom_header() {
    register_nav_menus(array(
        '[1]' => __('[2]', 'theme-textdomain'),
    ));
}
add_action('init', 'register_custom_header');

// In header.php
wp_nav_menu(array('theme_location' => '[3]'));
?>

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

Aheader-menu

BHeader Menu

Dfooter-menu

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatch between menu slug and theme_location

Using footer-menu instead of header-menu

The menu location slug and the theme_location parameter must match. The display name is a readable string.