Custom headers and footers in Wordpress

Introduction

Headers and footers are the top and bottom parts of your website. Customizing them helps you show your own logo, menu, or contact info on every page.

You want to add a logo and navigation menu at the top of your site.

You want to show copyright info and social links at the bottom of every page.

You want to change the header or footer layout for your brand style.

You want to add a search bar or call-to-action button in the header.

You want to include custom scripts or tracking codes in the footer.

Syntax

Wordpress

<?php
// To add custom header
function my_custom_header() {
    ?>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>
    <?php
}
add_action('wp_body_open', 'my_custom_header');

// To add custom footer
function my_custom_footer() {
    ?>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
    <?php
}
add_action('wp_footer', 'my_custom_footer');
?>

Use wp_body_open action to add code right after the opening <body> tag (top of the page).

Use wp_footer action to add code before the closing </body> tag.

Examples

This adds a logo image inside the header area using the wp_body_open hook.

Wordpress

<?php
function add_logo_to_header() {
    ?>
    <div class="logo">
        <img src="/images/logo.png" alt="Site Logo">
    </div>
    <?php
}
add_action('wp_body_open', 'add_logo_to_header');

This adds social media links at the bottom of every page using the wp_footer hook.

Wordpress

<?php
function add_social_links_footer() {
    ?>
    <div class="social-links">
        <a href="https://twitter.com">Twitter</a>
        <a href="https://facebook.com">Facebook</a>
    </div>
    <?php
}
add_action('wp_footer', 'add_social_links_footer');

Sample Program

This code adds a simple header with a site title and navigation links at the top. It also adds a footer with copyright text at the bottom. Both appear on every page.

Wordpress

<?php
// Custom header with site title and menu
function custom_header() {
    ?>
    <header style="background:#eee;padding:1rem;text-align:center;">
        <h1>Welcome to My Site</h1>
        <nav>
            <a href="/">Home</a> |
            <a href="/blog">Blog</a> |
            <a href="/contact">Contact</a>
        </nav>
    </header>
    <?php
}
add_action('wp_body_open', 'custom_header');

// Custom footer with copyright
function custom_footer() {
    ?>
    <footer style="background:#eee;padding:1rem;text-align:center;margin-top:2rem;">
        <p>&copy; 2024 My Site. All rights reserved.</p>
    </footer>
    <?php
}
add_action('wp_footer', 'custom_footer');
?>

Important Notes

Always use semantic HTML tags like <header> and <footer> for better accessibility.

Test your header and footer on different screen sizes to ensure they look good everywhere.

Use WordPress hooks wp_body_open and wp_footer to insert your custom code safely.

Summary

Custom headers and footers let you control what shows at the top and bottom of your site.

Use WordPress hooks wp_body_open and wp_footer to add your custom HTML.

Keep your code simple and use semantic tags for better user experience and accessibility.

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