The header.php File: What Needs to Go in It and What Doesn't

This tutorial explores the crucial header.php file in WordPress theme development. We'll examine a sample header.php file, detailing essential and non-essential content.

Introduction

Understanding the correct contents of header.php is vital for WordPress theme creation. It's more than just a logo and menu; it includes essential elements for functionality and SEO. These include: links, meta data, and various tags.

Specifically, header.php should contain:

1. Meta tags
2. Head tags
3. Favicon, RSS links, and Pingback
4. Title
5. Styles and scripts enqueued using wp_enqueue_style functions

The functions.php File: A Deeper Dive

Let's examine the functions.php file, where we'll add the following code snippets to manage styles and scripts:

remove_action('wp_head', 'wp_generator');

function enqueue_styles() {
    wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
    wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );

function enqueue_scripts() {
    wp_register_script( 'html5-shim', 'https://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
    wp_enqueue_script( 'html5-shim' );

    wp_register_script( 'custom-script', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

Removing the Meta Generator Tag

The line remove_action('wp_head', 'wp_generator'); removes the meta generator tag, which reveals the WordPress version. This is a security best practice to prevent potential vulnerabilities.

Adding CSS and Scripts

The enqueue_styles() and enqueue_scripts() functions, hooked into the wp_enqueue_scripts action, use wp_register_style and wp_enqueue_style (for CSS) and wp_register_script and wp_enqueue_script (for JavaScript) to efficiently manage stylesheets and scripts. This is the recommended approach for adding CSS and JS to your WordPress theme. The functions handle registering and enqueuing assets, ensuring proper loading order and preventing conflicts.

Understanding the header.php File

The header.php file should minimally include:

• DOCTYPE declaration: Specifies the HTML version.
• HTML document structure: The tag and its children.
• Character set declaration: <meta charset="UTF-8"> to ensure proper character encoding.
• Meta tags: Essential meta data like description, author, and viewport settings for responsiveness. Example: <meta content="Keywords" name="keywords"> and <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">.
• Title tag: <title></title> tag using wp_title() and bloginfo('name') for dynamic title generation.
• Opening <div> or other structural elements: To contain the header content. <p><strong>Conclusion</strong></p> <p>This guide provides a foundation for constructing a well-structured and secure <code>header.php file for your WordPress theme. Remember to leverage wp_enqueue_scripts for efficient asset management.

  This post has been updated with contributions from Sajal Soni, a website developer from India specializing in open-source frameworks.