What is Custom headers and footers in Wordpress?

Wordpressframework~5 mins

Custom headers and footers in Wordpress

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

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');
?>

OutputSuccess

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.