Header and footer customization in Wordpress - Mini Project: Build & Apply

Header and Footer Customization in WordPress

📖 Scenario: You are building a simple WordPress theme for a local bakery website. The bakery wants a custom header with their logo and navigation menu, and a footer with contact info and social media links.

🎯 Goal: Create a WordPress theme with a customized header and footer using template files. The header should include the bakery's logo and a navigation menu. The footer should show contact information and social media links.

📋 What You'll Learn

Create a header.php file with a logo image and a navigation menu

Create a footer.php file with contact info and social media links

Use WordPress functions wp_nav_menu() and get_template_directory_uri()

Include the header and footer in the main theme file index.php

💡 Why This Matters

🌍 Real World

Customizing headers and footers is a common task when building WordPress themes for clients or personal projects. It helps create a unique brand identity and user experience.

💼 Career

WordPress developers often need to create or modify theme template files and register menus to meet design requirements and client needs.

1

Create the header.php file with logo and navigation menu

Create a file called header.php. Inside it, add a <header> element. Insert an <img> tag with the source set to get_template_directory_uri() . '/images/logo.png' and alt text 'Bakery Logo'. Below the image, add a WordPress navigation menu using wp_nav_menu() with the theme location set to 'primary'.

Wordpress

Hint

Use get_template_directory_uri() to get the theme folder URL for the logo image. Use wp_nav_menu() with 'theme_location' => 'primary' to show the menu.

2

Create the footer.php file with contact info and social links

Create a file called footer.php. Inside it, add a <footer> element. Add a paragraph with the text 'Contact us: 123 Bakery St, Phone: [phone]'. Below that, add an unordered list with three list items containing links to Facebook, Twitter, and Instagram with hrefs '#facebook', '#twitter', and '#instagram' respectively.

Wordpress

Hint

Use semantic HTML tags like <footer>, <p>, and <ul> with <li> for the list of social links.

3

Include header and footer in index.php

Create a file called index.php. At the top, include the header by calling get_header();. At the bottom, include the footer by calling get_footer();. Between them, add a <main> element with a heading <h1> that says 'Welcome to Our Bakery!'.

Wordpress

Hint

Use get_header(); and get_footer(); to include the header and footer templates. Wrap the main content in a <main> tag.

4

Register the primary menu location in functions.php

Create a file called functions.php. Add a function named bakery_setup that calls register_nav_menus() with an array registering a menu location with key 'primary' and value 'Primary Menu'. Hook this function to the 'after_setup_theme' action using add_action().

Wordpress

<?php
// functions.php

// Your code here

Hint

Use register_nav_menus() inside a setup function and hook it to after_setup_theme to enable the menu location.

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