Create a Header and Footer in WordPress

A header and footer are important parts of a website layout. The header usually contains the logo and navigation menu, while the footer contains copyright information, contact details and useful links.

1. What Is a Website Header?

A header is the top section of a website. It commonly appears across multiple pages and helps visitors identify the website and navigate to important sections.

Common Header Elements

• Website logo
• Site title and tagline
• Navigation menu
• Search icon or search form
• Login, admission or contact button

2. What Is a Website Footer?

A footer is the bottom section of a website. It provides additional information and links that visitors may need.

Common Footer Elements

• Copyright notice
• Contact information
• About us link
• Privacy policy and terms links
• Social media links
• Additional navigation links

3. Header and Footer: Difference

4. Create a Header Using a Block Theme

Block themes let you edit website layouts through the WordPress Site Editor. The header is commonly managed as a template part.

5. Create a Footer Using a Block Theme

In a block theme, the footer can usually be edited in the Site Editor using a Footer template part.

6. Customize Headers and Footers in Classic Themes

Classic themes may provide header and footer settings in the Customizer, theme options or widget areas. Some classic themes require template-file editing for advanced changes.

To check available options, open the Customizer or theme settings. The menu names and available controls vary from theme to theme.

7. Understanding WordPress Header and Footer Files

Developers working with classic WordPress themes may use PHP template files to build a reusable header and footer.

8. Example: A Basic Classic Theme Header

The following is a simplified example for a classic WordPress theme. It demonstrates how a theme can display its title and registered navigation menu.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class="site-header">
    <div class="site-branding">
        <?php if (has_custom_logo()) {
            the_custom_logo();
        } else { ?>
            <a href="<?php echo esc_url(home_url('/')); ?>">
                <?php bloginfo('name'); ?>
            </a>
        <?php } ?>
    </div>

    <nav class="main-navigation">
        <?php
        wp_nav_menu(array(
            'theme_location' => 'primary',
            'fallback_cb' => false
        ));
        ?>
    </nav>
</header>

9. Example: A Basic Classic Theme Footer

The footer template commonly contains the footer content and required WordPress footer hooks.

<footer class="site-footer">
    <p>
        &copy; <?php echo esc_html(date('Y')); ?>
        <?php bloginfo('name'); ?>.
        All rights reserved.
    </p>
</footer>

<?php wp_footer(); ?>
</body>
</html>

10. Add CSS Styling to the Header and Footer

In a classic theme, CSS can control the appearance of the header and footer. Add the styles to your theme stylesheet or an appropriate custom CSS area.

.site-header {
    background-color: #0f172a;
    color: #ffffff;
    padding: 20px;
}

.site-header a {
    color: #ffffff;
    text-decoration: none;
}

.site-footer {
    background-color: #212529;
    color: #ffffff;
    padding: 25px;
    text-align: center;
}

.site-footer a {
    color: #f8f9fa;
}

@media (max-width: 768px) {
    .site-header,
    .site-footer {
        padding: 15px;
    }
}

11. Best Practices

• Keep the header simple and make navigation easy to understand.
• Use a readable logo and consistent brand colors.
• Keep footer links organized into useful groups.
• Check the layout on desktop, tablet and mobile screens.
• Ensure menus and buttons have working links.
• Use accessible labels and sufficient text contrast.
• Back up your website before making significant changes.
• Use a child theme for custom PHP or CSS changes to a classic theme.
• Preview changes before publishing them.

12. Practical Assignment

Lesson Summary

• A header appears at the top and usually contains branding and navigation.
• A footer appears at the bottom and contains additional information and links.
• Block themes commonly use the Site Editor and template parts.
• Classic themes may use the Customizer, widgets and PHP template files.
• header.php and footer.php are common classic theme files.
• The wp_head() and wp_footer() hooks support WordPress and plugin functionality.
• Always test your layout on different screen sizes.

Lesson 20 Quiz

Choose the correct answer for each question.