How to Separate Header From Body in WordPress HTML

To separate the header from the body in WordPress, keep the site header in its own <header> element, put the page content inside <main>, and add spacing or a border between them with CSS. In a block theme you do this in the Site Editor by editing the Header template part. In a classic theme you do it in header.php and the stylesheet of a child theme.

The wording is confusing because “header” means three different things in HTML and WordPress. This guide sorts them out first, then gives you the steps for both theme types.

What “header” and “body” actually mean

People ask this question for different reasons, so check which one is yours before you change anything.

• The document head. The <head> element holds the page title, meta tags, stylesheets and scripts. Visitors never see it. It is already separate from <body> in every WordPress theme.
• The site header. This is the visible strip at the top of the page: logo, navigation, search, a login button. It lives inside <body> and should use the <header> element.
• The page body or main content. This is the part that changes from page to page: the post, the archive, the member directory. It belongs in <main>.

Most readers want the second and third: a clear visual and structural split between the site header and the content below it. That is what the rest of this guide covers.

The target structure

Whatever theme you use, the rendered page should look like this:

<body>
  <header class="site-header">
    <!-- logo, navigation, search -->
  </header>

  <main id="content">
    <!-- the page, post or archive -->
  </main>

  <footer class="site-footer">
    <!-- footer content -->
  </footer>
</body>

These elements are landmarks. Screen reader users jump between them, search engines read them as hints about page structure, and your CSS gets a clean hook for each region. Use one <header> for the site and one <main> per page. An article can carry its own <header> for its title and byline, and that is fine, but it is a different header from the site one.

Check which kind of theme you have

Open the WordPress admin and look under Appearance.

• If you see Editor, you are on a block theme and edit headers visually in the Site Editor.
• If you see Customize and Menus but no Editor, you are on a classic theme. The header is a PHP file in the theme folder.

Some themes mix both. When in doubt, follow the block theme steps if Editor is present, and the classic steps if it is not.

Before you change either, take a full backup of your files and database. Header changes affect every page on the site, so a typo shows up everywhere at once.

Block themes: edit the Header template part

In a block theme the header is a template part. Every template that includes the header pulls in the same part, so you edit it once.

1. Go to Appearance > Editor.
2. Open Patterns and find the Template Parts section. Select Header.
3. Click into the canvas to edit. Select the outermost block of the header, usually a Group block.
4. Open the block settings sidebar, go to the Advanced area, and set HTML element to header.
5. Save.

Next, check the templates that use the header, such as Page, Single Post and Archive. The content area should sit in a Group block (or the Post Content wrapper) with its HTML element set to main. Most official block themes already do this, so you may only need to confirm it.

Menu labels move around between WordPress releases, so if you cannot find Template Parts under Patterns, open Appearance > Editor and look for the Header entry in the editor’s own navigation. The Template Part block documentation on wordpress.org describes the current layout.

Add space and a divider in the Site Editor

You do not need code for a basic separation.

• Select the header Group block and use Dimensions to add padding below.
• Use Border to add a bottom border, or add a Separator block directly under the header.
• Use Color to give the header its own background so it reads as a distinct band.

If you want the same result sitewide without touching each template, open Styles in the Site Editor and set the spacing on the Header element there.

Classic themes: header.php and a child theme

In a classic theme the opening of every page lives in header.php. It outputs the <head>, opens <body>, prints the site header and stops. Templates such as page.php and single.php then call get_header() at the top, output their content, and call get_footer().

A simplified header.php looks like this (example code, adapt it to your theme):

<!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="masthead" class="site-header">
  <?php the_custom_logo(); ?>
  <?php
  wp_nav_menu(
      array(
          'theme_location' => 'primary',
          'container'      => 'nav',
      )
  );
  ?>
</header>

<main id="content">

The matching footer.php closes </main>, prints the footer and calls wp_footer(). If your theme opens <main> inside each template instead, keep it there and make sure it closes in the same file. A mismatch between where <main> opens and closes is the most common reason a layout breaks after a header edit.

Do not edit the parent theme

If you change header.php in the theme you installed, the next theme update overwrites your work. Create a child theme instead.

1. Create a folder next to your theme in wp-content/themes/, for example mytheme-child.
2. Add a style.css with a header comment that includes Template: followed by the parent theme’s folder name.
3. Copy header.php from the parent into the child folder and edit the copy.
4. Activate the child theme under Appearance > Themes.

WordPress loads the child theme’s header.php in place of the parent’s. For CSS-only changes you do not need to copy any PHP file at all.

Separate the two visually with CSS

Once the markup is right, the visual split is a few lines of CSS. Put it in a child theme stylesheet, or paste it into Appearance > Customize > Additional CSS on a classic theme, or into Styles > Additional CSS in the Site Editor of a block theme.

.site-header {
  padding: 1rem 1.5rem;
  background: #ffffff;
  border-bottom: 1px solid #e2e4e7;
}

main#content {
  padding-block: 2rem;
}

Your theme may use different class names. Right-click the header in your browser, choose Inspect, and read the class on the <header> element before you write selectors.

Common variations

• Sticky header. Add position: sticky; top: 0; z-index: 100; to the header selector. Give it a solid background or the page will show through. If the admin bar is visible when you are logged in, the header may need an extra offset for that bar.
• Shadow instead of a border. Use box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); for a softer edge.
• Full-width header, narrow content. Keep the header unconstrained and set a max-width with auto side margins on the content wrapper.
• Different spacing on mobile. Wrap smaller padding values in a @media (max-width: 640px) rule, and test at phone width, not just on a desktop window.

Check the result

After you save, run through a short list.

1. Reload the front end with a hard refresh. Caching plugins and your host’s cache can serve the old header.
2. View the page source and confirm there is exactly one <header> for the site and one <main>.
3. Open a page, a single post and an archive. A header edit that looks right on the home page can break a template that has its own wrapper.
4. Resize the browser to phone width and check that the navigation still works.
5. Tab through the page with the keyboard and confirm focus moves through the header links before the content.

When the header still looks tangled with the body

• The header sits inside <main>. Your theme opens <main> too early. Move the opening tag below the header.
• Your CSS has no effect. A more specific selector in the theme is winning. Match the selector the theme uses, and avoid !important unless you have no other option.
• A page builder overrides the header. Some builders and themes ship their own header builder that replaces header.php or the Header template part. Edit the header in that tool instead.
• Changes vanish after an update. You edited the parent theme. Move the edit to a child theme.

Building a site that is more than a blog

A header that has to carry a member menu, notifications and a search box needs more care than a brochure site’s header. If you are putting together a community or membership site, our guide to choosing a WordPress community theme covers what to look for, and what Reign is explains one theme built for that job. For the wider plan, read how to build an online community.

Frequently asked questions

Is the header the same as the head in HTML?

No. The <head> holds metadata that visitors never see, while the site header is a visible <header> element inside <body>. WordPress already keeps the two apart, so you only need to work on the visible header.

Where is the header file in a classic WordPress theme?

It is header.php in the root of the active theme’s folder, usually wp-content/themes/your-theme/header.php. Templates load it by calling get_header().

How do I edit the header in a block theme?

Go to Appearance > Editor, open the Header template part under Patterns, edit it in the canvas and save. The change applies to every template that uses that part.

Can I add a line between the header and the page content without code?

Yes. In the Site Editor, add a bottom border to the header Group block or place a Separator block under it. In a classic theme, the Customizer’s Additional CSS box takes a single border-bottom rule.

Should I edit header.php directly?

Only in a child theme. Edits made to the parent theme’s file are lost when the theme updates. Copy the file into a child theme and edit the copy.

Why does my header change not show on the live site?

A cache is most likely serving the old page. Clear your caching plugin, your host’s cache and any CDN, then hard refresh the browser. Also confirm you saved the right template part or child theme file.

Do I need one header element per page?

You need one site-level <header> per page. Articles and sections can have their own headers for titles and bylines, which HTML allows.

Try it on a live site

If you would rather see a finished header and layout than build one, open the Reign demos and look at how the header sits above the content on real community pages. For a full walkthrough of a working setup, follow the community site build guide.