How to Separate Header from Body in HTML in WordPress

You can separate the header from the body in HTML in WordPress by editing your theme’s header.php file. Your page templates then load it with the get_header() function, which keeps the two sections in their own files. This guide assumes you have never opened a template file before.

Getting this wrong usually doesn’t break your site immediately. It shows up later. A header that won’t update, styles bleeding into the wrong section, a homepage that looks different from every other page for no obvious reason.

A common header job is to show 2 lines of text in a WordPress header, such as a name above a tagline.

By the end of this guide, you’ll know which files control your header and body and how to edit them safely. You’ll also learn to load a different header with get_header( 'shop' ). We checked every step in October 2026 against the WordPress developer docs and the theme handbook. Child themes, block themes and the common beginner mistakes are covered too.

What Does It Mean to Separate Header from Body in HTML in WordPress?

In plain HTML, a page has one <head> section (invisible metadata) and one <body> section (everything visible). WordPress doesn’t write that structure in a single file. It builds it out of smaller template files that get stitched together when a page loads.

That’s the real answer to what people mean when they search for how to separate header from body in HTML in WordPress. It’s not really about splitting a finished HTML document in half. It’s about understanding which WordPress file controls which part of that document so you can edit one without touching the other.

Two terms get confused constantly here. Let’s clear it up first.

• The <head> tag holds invisible metadata: stylesheets, scripts, meta tags, the page title. Visitors never see this.
• The <header> tag is the visible top section of your page: logo, navigation, tagline. Visitors see this immediately.

Most people asking about this topic mean the second one. They want to edit their visible site header without disturbing their homepage, blog posts, or product pages. That’s what this guide focuses on, though we’ll touch on the <head> section too since it lives in the same file.

How WordPress Structures the Header and Body Files

WordPress themes are built from a set of PHP template files. Understanding this WordPress theme structure makes everything else in this guide click into place.

Three files matter most for this task:

• header.php contains everything from the opening <!DOCTYPE html> tag through the closing of your visible <header> element. Logo, navigation menu, meta tags, all of it.
• index.php, page.php, or single.php (depending on what’s being viewed) hold your actual body content. This is where posts, pages, and products get displayed.
• footer.php closes out the page: copyright text, footer widgets and closing HTML tags.

These files are already separated by default in every properly built WordPress theme. Your job isn’t to invent this separation. It’s to understand it and then customize it safely.

The connection between them happens through a template tag. Every page template starts with a single line:

<?php get_header(); ?>

According to the WordPress Theme Handbook, this function pulls the entire contents of header.php into whatever template calls it. Everything written after that line, until <?php get_footer(); ?> shows up, counts as body content.

That single line is the actual mechanism behind separating header from body in HTML in WordPress. No plugin required. No special setting to toggle. It’s built into how WordPress assembles every page.

Before You Start: What You’ll Need

You need four things before you edit a theme file: admin access, a second way into your files, a backup and ideally a child theme. Skip them and one typo in header.php can take down your live site. Checking all four takes about two minutes.

• Admin access to your WordPress dashboard.
• FTP or file manager access as a backup option in case the built-in editor is turned off. Some hosts and security plugins do this with the DISALLOW_FILE_EDIT setting in wp-config.php.
• A full backup of your theme files, or at minimum a copy of header.php and your active page template.
• Ideally, a child theme already active. We’ll cover why in a later section, but doing this on your live parent theme means any update wipes your changes.

If you don’t have a backup plugin installed, even a manual copy-paste of your file contents into a text document works as an emergency backup.

Set aside 15-20 minutes for your first attempt at this. The editing itself is quick. Reading through header.php carefully the first time takes patience. Rushing this step is where most mistakes creep in. A second pass, after a short break, usually catches anything you missed the first time around.

How to Separate Header from Body in HTML in WordPress: Step-by-Step

On a classic theme, you separate the header from the body in six steps inside the Theme File Editor. You open header.php, back it up and read what it holds. Then you confirm the body template calls get_header() and make each change in the right file.

1. Log in to your dashboard and go to Appearance > Theme File Editor (older versions may label it Theme Editor). If it’s missing, your host has disabled it for security. Use FTP or your host’s file manager instead.
   
2. Scroll down the file list on the right and click header.php. This opens its contents in the main editing area.
   
3. Before editing, copy the entire contents of header.php into a plain text file on your computer and save it. Tedious, but it’s the difference between a 5-minute fix and a support ticket.
   
4. Review what’s inside. A typical file looks like this:

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

The file ends right after the closing </header> tag. Everything below, in a different file, is body content.

Three functions matter here and should never be deleted: wp_head() lets plugins inject scripts, styles, and SEO tags. body_class() adds dynamic CSS classes plugins rely on. wp_body_open() lets tools like Google Tag Manager insert tracking code right after the body tag opens.

5. Confirm the body lives in its own template. Click index.php or whichever template controls the page type. Near the top, look for:

<?php get_header(); ?>

And near the bottom:

<?php get_footer(); ?>

Everything between those lines is your body content. If your theme is built correctly, this separation already exists. You are only confirming it. For a deeper breakdown, see this guide on what index.php does in WordPress.

6. Make your customization in the correct file:
   

• Logo, navigation and top bar: Edit header.php between the <header> tags.
• Page content or layout: Edit index.php, page.php or single.php instead of header.php.
• SEO tags or meta info: Edit inside the <head> section of header.php, above the closing </head> tag. See this guide on how to add meta tags in WordPress for the safest method.
  

Save your changes. WordPress applies them immediately with no republishing required.

On a block theme such as Twenty Twenty-Five, the editor is not under Appearance. WordPress 5.9 moved it to Tools for block themes. Look under Tools > Theme File Editor. A block theme has no header.php to edit, though. Use the block theme steps further down instead.

How Do You Add a Second Header Like header-shop.php?

The get_header() function takes an optional name, and WordPress then loads header-{name}.php instead of header.php. A call to get_header( 'shop' ) loads header-shop.php from your theme. If that file is missing, WordPress falls back to the default header.php.

This comes straight from the get_header() reference on the WordPress developer site. Version 5.5 added a second $args parameter for passing data into the header. Here is how to set up a separate header for WooCommerce pages.

1. Copy the default header: In your child theme, copy header.php and name the copy header-shop.php.
   
2. Edit the copy: Change the logo, menu or top bar in header-shop.php. Keep wp_head(), body_class() and wp_body_open() in place.
3. Call it by name: In the template that renders your shop pages, swap the plain get_header() line for the check below.

This code loads the shop header only on WooCommerce pages and the normal header everywhere else.

<?php
if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) {
	get_header( 'shop' );
} else {
	get_header();
}
?>

To pass data into the header, add an array as the second argument. This call tells header-shop.php to show a banner.

<?php get_header( 'shop', array( 'show_banner' => true ) ); ?>

Inside header-shop.php, read the value from $args and escape anything you print.

<?php if ( ! empty( $args['show_banner'] ) ) : ?>
	<div class="shop-banner"><?php esc_html_e( 'Free shipping on orders over $50', 'your-textdomain' ); ?></div>
<?php endif; ?>

Note: The name is only the part after header-. So header-shop.php is loaded with 'shop', never with 'header-shop'.

How to Style the Header and Body Separately with CSS

You can style the header and body separately on a classic theme with a few lines in Appearance > Customize > Additional CSS. One ruleset targets the header element and another targets the body wrapper class. A change to one never moves the other.

1. Go to Appearance > Customize in your WordPress dashboard.
   
2. Select Additional CSS in the bottom left.
   
3. Add the code:

header {
    background-color: #f8f9fa;
    padding: 20px;
}

.site-content {
    padding: 40px;
}

4. Change the color code and padding pixels to the values you want.
   
5. Click Save to apply the changes.
   

Notice these two rulesets never touch each other. Change the header’s background color and the body layout stays exactly where it was. That’s the whole point of keeping these sections apart in the first place.

Note: If your theme wraps body content in a different class name than .site-content, your CSS won’t apply. Check your page source first, or inspect the element in your browser’s developer tools, to confirm the actual class names your theme uses.

Use a Child Theme to Keep This Safe

A child theme keeps your header edits safe when the parent theme updates. It holds its own copy of header.php, and WordPress loads that copy instead of the parent’s. Without one, the next theme update overwrites every change you made.

A child theme solves this by inheriting your parent theme’s styles and templates while letting you override individual files, like header.php, without touching the original.

Setting one up takes a few minutes:

1. Open your Site Folder and create a new folder inside /wp-content/themes/.
   
2. Add a style.css file that references your parent theme.
   
3. Copy header.php from the parent theme into your child theme folder. Your changes survive every future update.
   

If you’d rather see the full walkthrough with every file explained, this guide on creating a WordPress child theme covers it step by step.

Skipping this step is fine for a quick test on a staging site. It’s a real risk on anything live.

How Block Themes Handle Header and Body Separation

Block themes separate the header from the body with template parts instead of PHP files. The header lives in parts/header.html and you edit it in the Site Editor with blocks. Every template that includes that part shows the same header.

Block themes don’t use header.php at all. Instead, template parts live inside an HTML file, usually found at /parts/header.html, and get edited visually rather than in code.

Here’s the block theme version of the same task:

1. Go to Appearance > Editor in your dashboard.
   
2. Click Patterns > Header to open the header template part.
   
3. Edit it using the block editor. Add, remove, or rearrange blocks visually.
   
4. Click Save.
   

No code required. The separation between header and body still exists underneath; WordPress just handles it through blocks and template parts instead of PHP includes. If you’re not sure which type of theme you’re running, check Appearance > Themes. Block themes usually show “Editor” instead of “Customize” in the theme options.

You can also use that header template part for a site-wide message by adding an alert bar in a block theme header.

Common Mistakes When You Separate Header from Body in HTML in WordPress

The most common mistakes when you separate the header from the body are editing the parent theme and deleting wp_head(). Unclosed tags and skipped backups cause the rest. Each one below comes with the fix.

• Editing the parent theme directly: The moment that theme updates, your changes vanish. Always work in a child theme for anything beyond a quick test.
• Deleting wp_head() by accident: This single function powers most plugin integrations. If your SEO plugin, analytics, or caching tool suddenly stops working after an edit, check whether wp_head() is still there.
• Leaving an HTML tag unclosed: One missing closing tag in header.php can break your entire site layout and not just the header. Always double-check your brackets before saving.
• Confusing <head> with <header>: They’re not the same thing. Mixing them up leads to metadata showing up where visible content should be, or vice versa.
• Testing changes directly on a live site: A staging environment costs nothing on most hosts and saves you from visitors seeing a broken page mid-edit.
• Skipping the backup step entirely: It’s the one step everyone wants to skip. It’s also the one that saves the most time when something goes wrong.
• Assuming every theme structures its header the same way: Some themes split navigation into a separate template part. Others load the logo through a different function entirely. Always check your specific theme’s files before copying steps from any tutorial. This one included.

How to Test Your Header and Body Separation

You test the separation by reading the page source, checking two screen sizes and clicking through several templates. View Page Source shows where the head ends and the body begins. Testing takes a few minutes and catches problems before visitors do.

Right-click anywhere on your published page and select View Page Source. Scroll until you find the closing </head> tag. Everything above it is metadata. Everything below, starting with <body>, is what visitors see on the page.

Check your site on a phone and a desktop browser separately. Header issues often only show up at specific screen widths.

Width matters as much as the header. Check the standard page width your theme sets for content.

Run your page through a tool like Google PageSpeed Insights. A clean separation between header and body rarely causes performance problems on its own. A bloated header full of unnecessary scripts can slow things down, though. If your site feels slow generally, this guide on why WordPress runs slow covers the usual cause.

Finally, click through a handful of different pages beyond the homepage. A header change that looks fine on one template can behave differently on another if your theme uses multiple header variations.

Conclusion

Learning to separate header from body in HTML in WordPress comes down to three parts: header.php, your page templates and the get_header() function connecting them. WordPress already builds this separation into every properly coded theme.

Your job is customizing it safely, ideally inside a child theme, with a backup ready before you touch anything. Whether you’re working with a classic theme’s PHP files or a block theme’s visual editor, the underlying principle stays the same. Header content stays in its file. Body content stays in its own file.

Test on a staging site first if you can back up before you edit. And if you’d rather hand this off entirely, our WordPress developers can handle theme customizations like this without the trial and error.

Frequently Asked Questions (FAQs)