Custom headers and footers in Wordpress - Mini Project: Build & Apply

Custom Headers and Footers 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 custom footer with contact info and social media links.

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

📋 What You'll Learn

Create a header.php file with a logo image and a navigation menu using wp_nav_menu().

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

Use WordPress functions get_header() and get_footer() in the main template file index.php.

Ensure semantic HTML5 structure with <header> and <footer> tags.

💡 Why This Matters

🌍 Real World

Custom headers and footers are essential for branding and navigation in WordPress websites. This project shows how to build them properly in a theme.

💼 Career

Knowing how to create and customize headers and footers is a key skill for WordPress theme developers and web designers.

1

Create the header.php file with logo and navigation menu

Create a file called header.php that contains a <header> element. Inside it, add an <img> tag with src="/wp-content/themes/your-theme/images/logo.png" and alt="Bakery Logo". Below the image, add a navigation menu using wp_nav_menu() with the argument array('theme_location' => 'primary').

Wordpress

# Create header.php with header tag, logo image, and wp_nav_menu call

    

Hint

Use the <header> tag for the header section. Use wp_nav_menu() to display the menu registered as 'primary'.

2

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

Create a file called footer.php that contains a <footer> element. Inside it, add a paragraph with the text Contact us at: [e-mail]. Below that, add an unordered list with three list items containing links to Facebook, Twitter, and Instagram with hrefs https://facebook.com/bakery, https://twitter.com/bakery, and https://instagram.com/bakery respectively.

Wordpress

    
     'primary')); ?>



    

Hint

Use the <footer> tag for the footer section. Add contact info in a paragraph and social links in a list.

3

Use get_header() and get_footer() in index.php

In the index.php file, add the PHP function calls get_header(); at the top and get_footer(); at the bottom to include the header and footer templates.

Wordpress

Hint

Use get_header(); to include the header and get_footer(); to include the footer in your main template.

4

Add semantic HTML5 structure and register the menu

In your theme's functions.php file, register a navigation menu with the location name 'primary' using register_nav_menus(). Also, ensure your header.php and footer.php use semantic HTML5 tags <header> and <footer> respectively.

Wordpress

<?php
// Register the primary menu here

// Your code here

Hint

Use register_nav_menus() inside a function hooked to after_setup_theme to register your menu location.

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