Header and footer customization in Wordpress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the header in a WordPress theme?

The header usually contains the site title, logo, navigation menu, and sometimes contact info. It appears at the top of every page and helps visitors know where they are.

beginner

How can you customize the footer in WordPress without coding?

You can customize the footer using the WordPress Customizer or a page builder plugin. These tools let you change text, add widgets, or change layout easily.

intermediate

Which WordPress file controls the header content in a theme?

The header.php file controls the header content. Editing this file changes what appears in the header across the site.

intermediate

What is a child theme and why use it for header/footer customization?

A child theme is a theme that inherits the functionality of another theme, called the parent theme. You can safely change files like header.php or footer.php in the child theme without losing changes when the main theme updates.

advanced

Name two ways to add custom code to the WordPress footer.

You can add custom code by editing footer.php or by using the 'wp_footer' hook in a plugin or functions.php file. The hook method is safer and update-proof.

Which file typically contains the header markup in a WordPress theme?

A header.php

B footer.php

C index.php

D functions.php

The header.php file holds the header markup and content in WordPress themes.

What is the safest way to customize header or footer code without losing changes on theme update?

A Edit the main theme files directly

B Delete the theme and start over

C Use the WordPress Customizer only

D Use a child theme

Using a child theme lets you customize safely without losing changes when the main theme updates.

Which WordPress hook is used to add code to the footer?

A wp_header

B init

C wp_footer

D the_content

The 'wp_footer' hook allows you to add code to the footer area safely.

Which tool lets you customize header and footer visually without coding?

A WordPress Customizer

B FTP client

C PHP editor

D Command line

The WordPress Customizer provides a visual interface to change header and footer settings.

What is a common element found in the WordPress header?

A Post comments

B Site logo

C Sidebar widgets

D Footer credits

The site logo is commonly placed in the header to identify the website.

Explain how you would safely customize the header and footer in a WordPress site.

Think about how to keep changes safe from theme updates.

Describe the role of the WordPress Customizer in header and footer customization.

Imagine you want to change the site look without touching code.

Practice

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