0
0
WordpressConceptBeginner · 3 min read

What is header.php in WordPress: Purpose and Usage Explained

header.php in WordPress is a template file that contains the top part of your website’s pages, including the <head> section and the site header. It loads important elements like styles, scripts, and navigation that appear on every page. This file helps keep your site consistent and organized.
⚙️

How It Works

Think of header.php as the top frame of a picture that holds the main title and decorations. In WordPress, this file is included at the start of most page templates to show the site’s header and load essential resources like stylesheets and scripts.

When WordPress builds a page, it looks for header.php and inserts its content at the top. This way, you don’t have to repeat the same code on every page. It’s like having a master header that appears everywhere, making your site look uniform and easier to update.

💻

Example

This example shows a simple header.php file that sets up the HTML head and a basic site header with a title and navigation menu.

php
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php bloginfo('name'); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <header>
    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    <nav>
      <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>
  </header>
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Site Name</title> <!-- WordPress head elements like styles and scripts --> </head> <body class="home page"> <header> <h1><a href="https://example.com">Site Name</a></h1> <nav> <!-- Navigation menu links --> </nav> </header>
🎯

When to Use

Use header.php whenever you want to define or customize the top part of your WordPress site that appears on many pages. It is essential for adding site-wide elements like logos, menus, meta tags, and scripts.

For example, if you want to add a custom navigation menu, change the site title style, or include analytics scripts, you do it here. This keeps your site consistent and makes updates easier since you only change one file instead of every page.

Key Points

  • header.php holds the top section of your WordPress site pages.
  • It includes the <head> HTML and site header content like logos and menus.
  • WordPress loads it automatically at the start of most templates.
  • Editing this file changes the header across your whole site.
  • It helps keep your site organized and consistent.

Key Takeaways

header.php defines the top part of your WordPress site including the <head> and header content.
It is included automatically in most page templates to keep site headers consistent.
Use it to add or customize site-wide elements like navigation menus, logos, and scripts.
Changing header.php updates the header on all pages, making site-wide changes easy.
It helps organize your theme by separating header code from other page parts.