Skip to main content

WordPress Headers

Introduction​

Headers are one of the most critical elements of a WordPress website. They appear at the top of every page and typically contain your site's logo, navigation menu, search functionality, and sometimes additional elements like social media icons or call-to-action buttons. A well-designed header helps with navigation, reinforces your brand identity, and provides a consistent user experience across your website.

In this guide, we'll explore how WordPress headers work, how to customize them, and best practices for creating effective headers for your WordPress site.

Understanding WordPress Headers​

In WordPress themes, the header is usually defined in a file called header.php. This file contains the HTML structure for the top section of your website and is included at the beginning of each page template.

Basic Header Structure​

A typical WordPress header includes:

  1. DOCTYPE declaration
  2. HTML opening tag
  3. Head section with meta tags, title, and stylesheets
  4. Opening body tag
  5. Header content (logo, navigation, etc.)

Here's a simplified example of a basic header.php file:

php
<!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 id="site-header" class="site-header">
        <div class="site-branding">
            <?php if (has_custom_logo()) : ?>
                <?php the_custom_logo(); ?>
            <?php else : ?>
                <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
                <p class="site-description"><?php bloginfo('description'); ?></p>
            <?php endif; ?>
        </div>

        <nav id="site-navigation" class="main-navigation">
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'primary',
                    'menu_id'        => 'primary-menu',
                )
            );
            ?>
        </nav>
    </header><!-- #site-header -->

Key Components of WordPress Headers​

1. Site Logo/Title​

WordPress offers a built-in way to manage your site logo through the Customizer:

php
<?php 
if (has_custom_logo()) {
    the_custom_logo();
} else {
    echo '<h1 class="site-title"><a href="' . esc_url(home_url('/')) . '">' . get_bloginfo('name') . '</a></h1>';
    echo '<p class="site-description">' . get_bloginfo('description') . '</p>';
}
?>

This code displays a custom logo if one has been uploaded through the WordPress Customizer. Otherwise, it falls back to displaying the site title and tagline.

2. Navigation Menu​

Navigation menus allow users to browse your site. WordPress provides the wp_nav_menu() function to display menus:

php
<?php
wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
        'container'      => 'nav',
        'container_class'=> 'main-navigation',
    )
);
?>

For this to work, you need to register the menu location in your theme's functions.php file:

php
function register_my_menus() {
    register_nav_menus(
        array(
            'primary' => __('Primary Menu', 'yourtheme'),
            'mobile'  => __('Mobile Menu', 'yourtheme'),
        )
    );
}
add_action('after_setup_theme', 'register_my_menus');

3. Search Functionality​

Many headers include a search feature to help users find content. You can add a search form using:

php
<?php get_search_form(); ?>

Or create a custom search form:

php
<form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search..." value="<?php echo get_search_query(); ?>" name="s" />
    </label>
    <button type="submit" class="search-submit">Search</button>
</form>

Customizing WordPress Headers​

Using the WordPress Customizer​

The WordPress Customizer provides a user-friendly interface for customizing various aspects of your theme, including the header.

Most modern WordPress themes include Customizer options for:

  • Uploading a logo
  • Adjusting header layout
  • Changing header colors
  • Setting header height

To access the Customizer, go to Appearance > Customize in your WordPress admin dashboard.

Custom Header Images​

WordPress themes can support custom header images:

php
// In functions.php
function theme_custom_header_setup() {
    $args = array(
        'default-image'      => get_template_directory_uri() . '/images/default-header.jpg',
        'default-text-color' => '000',
        'width'              => 1000,
        'height'             => 250,
        'flex-width'         => true,
        'flex-height'        => true,
        'wp-head-callback'   => 'theme_header_style',
    );
    add_theme_support('custom-header', $args);
}
add_action('after_setup_theme', 'theme_custom_header_setup');

To display the header image:

php
<?php if (has_header_image()) : ?>
    <div class="custom-header">
        <img src="<?php header_image(); ?>" width="<?php echo esc_attr(get_custom_header()->width); ?>" height="<?php echo esc_attr(get_custom_header()->height); ?>" alt="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>">
    </div>
<?php endif; ?>

Creating a Sticky Header​

Sticky headers remain visible as users scroll down the page. Here's a simple implementation:

HTML/PHP:

php
<header id="sticky-header" class="site-header">
    <!-- Header content -->
</header>

CSS:

css
.sticky-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

JavaScript (using jQuery):

javascript
jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('#sticky-header').addClass('sticky');
        } else {
            $('#sticky-header').removeClass('sticky');
        }
    });
});

Advanced Header Techniques​

Transparent Headers​

Transparent headers allow the background content to show through:

css
.transparent-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 1000;
}

.transparent-header .site-title a,
.transparent-header .main-navigation a {
    color: #fff; /* Light text for visibility against dark backgrounds */
}

Dynamic Headers​

You can create headers that change based on the page context:

php
<header class="site-header <?php echo is_front_page() ? 'front-page-header' : 'inner-page-header'; ?>">
    <!-- Header content -->
</header>

With corresponding CSS:

css
.front-page-header {
    height: 80vh;
    background-size: cover;
    background-position: center;
}

.inner-page-header {
    height: 200px;
    background-color: #f5f5f5;
}

Mobile-Responsive Headers​

Creating responsive headers is crucial for good mobile experience:

css
@media screen and (max-width: 768px) {
    .site-header {
        flex-direction: column;
        padding: 10px;
    }
    
    .main-navigation {
        display: none; /* Hide desktop navigation */
    }
    
    .mobile-menu-toggle {
        display: block; /* Show mobile menu button */
    }
}

Example of a mobile menu toggle button:

php
<button class="mobile-menu-toggle" aria-controls="primary-menu" aria-expanded="false">
    <span class="screen-reader-text">Menu</span>
    <span class="menu-toggle-icon"></span>
</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.querySelector('.mobile-menu-toggle');
    const navigation = document.querySelector('.main-navigation');
    
    menuToggle.addEventListener('click', function() {
        navigation.classList.toggle('toggled');
        if (menuToggle.getAttribute('aria-expanded') === 'true') {
            menuToggle.setAttribute('aria-expanded', 'false');
        } else {
            menuToggle.setAttribute('aria-expanded', 'true');
        }
    });
});
</script>

Real-World Header Examples​

E-commerce Header​

An e-commerce header might include additional elements like a cart icon and user account area:

php
<header class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
    </div>
    
    <nav class="main-navigation">
        <?php wp_nav_menu(['theme_location' => 'primary']); ?>
    </nav>
    
    <div class="header-actions">
        <?php get_search_form(); ?>
        
        <div class="user-account">
            <?php if (is_user_logged_in()) : ?>
                <a href="<?php echo esc_url(get_permalink(get_option('woocommerce_myaccount_page_id'))); ?>">My Account</a>
            <?php else : ?>
                <a href="<?php echo esc_url(get_permalink(get_option('woocommerce_myaccount_page_id'))); ?>">Login</a>
            <?php endif; ?>
        </div>
        
        <div class="shopping-cart">
            <a href="<?php echo esc_url(wc_get_cart_url()); ?>">
                <span class="cart-icon">🛒</span>
                <span class="cart-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
            </a>
        </div>
    </div>
</header>

Blog Website Header​

A blog header might emphasize categories and social sharing:

php
<header class="site-header blog-header">
    <div class="top-header">
        <div class="social-links">
            <a href="#" class="social-link">Facebook</a>
            <a href="#" class="social-link">Twitter</a>
            <a href="#" class="social-link">Instagram</a>
        </div>
        
        <?php get_search_form(); ?>
    </div>
    
    <div class="main-header">
        <div class="site-branding">
            <?php the_custom_logo(); ?>
            <p class="site-description"><?php bloginfo('description'); ?></p>
        </div>
    </div>
    
    <nav class="category-navigation">
        <div class="category-menu-wrapper">
            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'category-menu',
                    'menu_id'        => 'category-menu',
                )
            );
            ?>
        </div>
    </nav>
</header>

Best Practices for WordPress Headers​

  1. Keep it simple and clean: Don't overcrowd your header with too many elements.

  2. Ensure mobile responsiveness: Test your header on various screen sizes.

  3. Optimize for speed: Compress images and minimize scripts to ensure fast loading.

  4. Maintain accessibility: Use proper ARIA attributes and ensure keyboard navigation works.

  5. Be consistent: Keep your header design consistent with your overall brand and site design.

  6. Consider your users' needs: Include the most important navigation items and functionality.

  7. Add page conditional logic: Display different header elements based on context:

php
<?php if (is_front_page()) : ?>
    <!-- Show expanded header with hero image -->
<?php else : ?>
    <!-- Show compact header -->
<?php endif; ?>
  1. Use WordPress hooks: Utilize WordPress hooks to add elements to your header:
php
function add_header_notification() {
    if (is_front_page()) {
        echo '<div class="header-notification">Special offer: 20% off all products this week!</div>';
    }
}
add_action('wp_body_open', 'add_header_notification');

Troubleshooting Common Header Issues​

Header Not Displaying Correctly​

If your header isn't displaying correctly, check:

  1. If your theme's header.php file has syntax errors
  2. If all referenced stylesheets are loading properly
  3. For conflicting CSS styles
  4. If responsive breakpoints are set correctly

If your navigation menu isn't appearing:

  1. Make sure the menu location is registered in functions.php
  2. Check if a menu has been assigned to that location in WordPress admin (Appearance > Menus)
  3. Verify that the menu ID in wp_nav_menu() matches the registered menu location

Summary​

WordPress headers are crucial components of your site's design and functionality. They help with navigation, branding, and user experience. In this guide, we've explored:

  • The basic structure of WordPress headers
  • Key components like logos, navigation menus, and search functionality
  • How to customize headers using the WordPress Customizer
  • Advanced techniques like sticky, transparent, and responsive headers
  • Real-world examples and best practices

With this knowledge, you should now be able to create effective and attractive headers for your WordPress websites.

Additional Resources​

Exercises​

  1. Create a simple header with a logo and navigation menu.
  2. Implement a sticky header that changes appearance when scrolling.
  3. Design a mobile-responsive header with a hamburger menu for mobile devices.
  4. Create a header that displays differently on the home page versus other pages.
  5. Add a notification bar to your header that can be dismissed with JavaScript.

Happy coding!


If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)