Episode 17 of 32

The header.php File

Create the header.php template — convert the static header HTML into a dynamic WordPress template part.

The header.php File

In WordPress, the header is stored in a separate file called header.php. Every template file includes it using get_header(). Let's convert our static header HTML into a dynamic WordPress header.

Creating header.php

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

<header id="main-header">
    <div class="container">
        <div class="header-inner">
            <div class="logo">
                <a href="<?php echo home_url(); ?>">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" 
                         alt="<?php bloginfo('name'); ?>">
                </a>
            </div>
            <nav id="main-nav">
                <?php wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'container'      => false,
                    'menu_class'     => '',
                    'fallback_cb'    => false,
                )); ?>
            </nav>
        </div>
    </div>
</header>

Static vs WordPress: What Changed

Static HTML	WordPress PHP
`<html lang="en">`	`<html <?php language_attributes(); ?>>`
`<meta charset="UTF-8">`	`<meta charset="<?php bloginfo('charset'); ?>">`
`<title>My Site</title>`	Handled by `wp_head()` + `add_theme_support('title-tag')`
`<link rel="stylesheet" ...>`	Handled by `wp_enqueue_style()` via `wp_head()`
`href="index.html"`	`href="<?php echo home_url(); ?>"`
`src="img/logo.png"`	`src="<?php echo get_template_directory_uri(); ?>/img/logo.png"`
Hardcoded `<ul><li>` nav	`<?php wp_nav_menu(...); ?>`

WordPress Functions Used

Function	Purpose
`language_attributes()`	Outputs `lang="en-US"` etc.
`bloginfo('charset')`	Outputs the character set
`wp_head()`	Outputs styles, scripts, meta — required
`body_class()`	Adds dynamic CSS classes to body (e.g., `home`, `page`, `single`)
`home_url()`	Returns the homepage URL
`bloginfo('name')`	Returns the site name
`wp_nav_menu()`	Outputs a registered navigation menu

Using get_header()

In every template file, include the header with:

<?php get_header(); ?>

<!-- Page-specific content goes here -->

<?php get_footer(); ?>

Key Takeaways

header.php contains everything from <!DOCTYPE> to the end of the header section
Replace hardcoded values with WordPress functions for dynamic output
wp_head() is required — it loads styles, scripts, and meta tags
wp_nav_menu() replaces hardcoded navigation — menus are managed from the admin
Include the header in templates with get_header()