How to Separate Header from Body in HTML in WordPress?

Table Of Contents

Introduction

If you have ever opened the source code of a WordPress website and looked at the HTML output, you may have noticed that the page is divided into different sections. Two of the most important sections are the header and the body. Understanding how to separate the header from the body in HTML within WordPress is a fundamental skill that every WordPress developer, theme builder, or advanced user should know.

This guide is written for people who are either just getting started with WordPress development or who want to build a deeper understanding of how WordPress renders HTML. You do not need to be a professional developer to follow this guide. If you know the basics of WordPress and have a general idea of what HTML is, you will be able to follow along easily.

By the end of this article, you will understand what the WordPress header and body sections are, why they are separated, how WordPress handles them using template files, and how you can modify or control each section independently. You will also find practical code examples, tips, and best practices.

What Does Separating Header from Body Mean in HTML?

Before diving into WordPress-specific details, it is important to understand what the terms “header” and “body” mean in the context of HTML.

The Standard HTML Structure

Every HTML web page follows a basic structure. At its core, an HTML document looks like this:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<header>Site Header / Navigation</header>

<main>Main Content Area</main>

<footer>Site Footer</footer>

</body>

</html>

In this structure, there are two main sections worth noting:

The <head> tag: This is not the visible header on the page. It is the invisible section that contains metadata, links to stylesheets, scripts, and SEO-related information. Users cannot see this in the browser.
The <body> tag: This is everything that is visible on the webpage. It includes the visual header (logo, navigation), the main content area, sidebars, and the footer.
The <header> element (inside <body>): This is a semantic HTML5 element that represents the top visible section of a page, typically containing the site logo, navigation menus, and tagline.

So when people talk about separating the “header” from the “body” in WordPress, they usually mean one of two things: either separating the <head> metadata section from the visible <body> section, or separating the visual <header> element from the rest of the page body content. Both are important and this guide covers both in detail.

How WordPress Handles HTML Structure

WordPress is a content management system (CMS) that dynamically generates HTML pages. Unlike a static HTML file where all the code is in one place, WordPress splits the page into multiple PHP template files. Each file is responsible for rendering a different part of the page.

The WordPress Theme Template System

Every WordPress theme is made up of several PHP files. These files work together to build the complete HTML page. The most important ones for understanding header and body separation are:

header.php – Contains the opening HTML structure, the <head> section, and the visible <header> section with the navigation.
footer.php – Contains the closing tags for the page and the footer content.
index.php / page.php / single.php – These are the page template files that contain the main body content.
functions.php – The theme’s core functions file, used to enqueue scripts, add actions, and register features.

The get_header() and get_footer() Functions

WordPress uses two key functions to separate the header and footer from the body:

get_header() – This function is placed at the top of template files like index.php or page.php. It loads the header.php file and outputs all the HTML from the opening <!DOCTYPE html> tag down through the end of the <header> section.
get_footer() – This function is placed at the bottom and loads footer.php, which closes the <body> and <html> tags.

This system means the HTML header is physically and logically separated from the page body. WordPress stitches them together at runtime to produce the final HTML output that the browser receives.

What Is Inside the WordPress header.php File?

The header.php file is the heart of the header section in any WordPress theme. Understanding what is inside it will help you make the right changes when you need to separate or customize the header from the body.

A Typical header.php Structure

Here is what a standard header.php file looks like in a classic WordPress theme:

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php wp_body_open(); ?>

<?php the_custom_logo(); ?>

</div>

<nav><?php wp_nav_menu(array(‘theme_location’ => ‘primary’)); ?></nav>

</header>

Key Functions in the Header

language_attributes() – Adds the language and text direction attributes to the <html> tag.
bloginfo(‘charset’) – Outputs the character set for the website.
wp_head() – One of the most critical functions. It fires the wp_head action hook, which allows WordPress and plugins to inject scripts, styles, and metadata into the <head> section.
body_class() – Adds dynamic CSS classes to the <body> tag, which plugins and themes can use for styling.
wp_body_open() – Fires immediately after the opening <body> tag, allowing plugins like Google Tag Manager to insert code.

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

Now that you understand the concepts, let us walk through the actual process of separating the header from the body in WordPress, step by step. This section covers multiple approaches depending on your situation.

Step 1: Access Your Theme Files

Before you make any changes, you need to access your WordPress theme files. There are two common ways to do this:

Method A: Using the WordPress Theme File Editor

Log in to your WordPress admin dashboard.
Go to Appearance > Theme File Editor (or Theme Editor in older versions).
On the right side, you will see a list of theme files.
Click on header.php or the page template file you want to edit.

Important: Always back up your theme files before making any edits. A mistake in the theme editor can break your site. It is strongly recommended to use a child theme instead of editing the parent theme directly.

Method B: Using FTP or a File Manager

Connect to your server using an FTP client like FileZilla, or use your hosting control panel’s File Manager.
Navigate to /wp-content/themes/your-theme-name/
Download and open the file you want to edit using a code editor like Visual Studio Code or Notepad++.

Step 2: Create a Child Theme (Recommended)

If you plan to make ongoing changes to your theme, always use a child theme. A child theme inherits all the styles and functionality of the parent theme, but lets you override specific files without losing your changes when the parent theme is updated.

To create a child theme:

Create a new folder in /wp-content/themes/ and name it something like yourtheme-child.
Inside that folder, create a style.css file with the following code:

Theme Name: Your Theme Child

Template: yourtheme

Create a functions.php file in the child theme folder to enqueue parent styles.
Activate the child theme from Appearance > Themes.

Step 3: Understand Where the Header Ends and Body Begins

In WordPress theme development, the transition from header to body happens in a very specific way. Look at your page template files (like index.php, page.php, or single.php). A typical page template looks like this:

<?php get_header(); ?>

<?php

if ( have_posts() ) : while ( have_posts() ) : the_post();

the_content();

endwhile; endif;

</main>

<?php get_footer(); ?>

The line get_header() marks the start of the header, and everything between get_header() and get_footer() is the body content. This is the natural separation WordPress enforces through its template system.

Step 4: Customize the header.php File

If you want to make changes to just the header section, open your child theme’s header.php file (copy it from the parent theme if it does not exist yet). Here are common customizations:

Removing or Changing the Header Layout

If you want the header to show only the logo and not the navigation menu, you would remove or comment out the navigation code inside header.php:

<?php the_custom_logo(); ?>

<!– Navigation removed for this layout –>

</header>

Adding Custom Content to the Header

You can also add a custom announcement bar, a search field, or social icons directly inside the header.php file, just before or after the closing </header> tag:

<p>Free shipping on all orders over $50!</p>

</div>

Step 5: Create a Page-Specific Header (Advanced)

WordPress allows you to create multiple header files for different pages. This is extremely useful when you want a different header for your homepage, landing pages, or blog pages.

To create a custom header for a specific page:

Create a new file and name it header-landing.php in your child theme folder.
Add your custom header HTML to this file.
In your page template, call this specific header like this:

<?php get_header(‘landing’); ?>

<!– This will load header-landing.php –>

WordPress will automatically look for a file named header-landing.php and load it for that page.

Step 6: Use WordPress Hooks to Separate Header Content Dynamically

Sometimes you do not want to touch the template files at all. Instead, you can use WordPress action hooks to inject content into the header or separate it from the body dynamically using the functions.php file.

Adding Content to the Header Using wp_head

add_action( ‘wp_head’, ‘my_custom_head_code’ );

function my_custom_head_code() {

echo ‘<meta name=”theme-color” content=”#ffffff”>’;

}

Adding Content After the Opening Body Tag Using wp_body_open

add_action( ‘wp_body_open’, ‘my_body_open_code’ );

function my_body_open_code() {

echo ‘<!– Google Tag Manager –>’;

}

This method is very clean because it keeps your template files unchanged and puts all customization logic in functions.php. It is especially useful for adding analytics scripts or tag manager code.

How Block Themes Handle Header and Body Separation

Starting with WordPress 5.9, a new type of theme called a Full Site Editing (FSE) theme or block theme was introduced. Block themes work differently from classic themes. Instead of PHP template files, they use HTML template files and WordPress blocks.

Template Files in Block Themes

In a block theme, your templates are stored in a /templates/ folder and template parts (like headers and footers) are stored in a /parts/ folder. Instead of header.php, you have a file like /parts/header.html.

Editing the Header in Block Themes

Go to Appearance > Editor in your WordPress dashboard.
Click on Patterns > Template Parts.
Select the Header template part.
Use the block editor to modify the header independently of the page body.
Click Save when done.

This approach is completely visual and requires no coding. The header and body are separated as distinct blocks, which makes it easy for non-developers to manage them independently.

Using Page Builders to Separate Header and Body

Many WordPress users work with page builder plugins like Elementor, Divi, Beaver Builder, or Bricks Builder. These tools provide visual interfaces to control the header and body sections separately without touching any code.

Elementor Header and Body Separation

Elementor Pro includes a Theme Builder feature that lets you design a completely custom header template and assign it to any page or post type. Here is how it works:

Go to Templates > Theme Builder in your WordPress dashboard.
Click Add New and select Header as the template type.
Design your header using Elementor’s drag-and-drop interface.
Set the display conditions to control which pages this header applies to.
Publish the template.

Elementor will then replace the default header from your theme with your custom one. The body content remains controlled by your page’s own Elementor design or WordPress content editor.

Hiding the Theme Header for Full-Width Pages

Sometimes you want to build a landing page where the theme header is completely removed. Elementor, Divi, and most page builders offer a Canvas or Full Width template option that removes the header and footer, leaving only the body content. To use it:

Edit the page in WordPress.
Look for the Page Attributes panel on the right side.
Change the Template option to Elementor Canvas (or equivalent) to remove the header from the body completely.

Separating the HTML <head> Section from the <body> Visually

This section is for developers and advanced users who want to understand the actual HTML output and see clearly where the <head> ends and the <body> begins.

Viewing the HTML Source of Your WordPress Page

Open your WordPress site in a browser.
Right-click anywhere on the page and choose View Page Source.
You will see the raw HTML. Scroll down to see the structure.
Look for the </head> closing tag. Everything before this is the <head> section containing metadata, styles, and scripts. Everything after the <body> tag is the visible body of the page.

What Belongs in the <head> vs <body>

In the <head>: meta tags, title tag, CSS stylesheets, canonical URLs, Open Graph tags, JSON-LD structured data, and script tags with defer or async attributes.
In the <body>: all visible HTML content including the site header, navigation, content area, sidebars, widgets, and footer.

Common Mistakes to Avoid

When separating the header from the body in WordPress, beginners often run into a few common errors. Here are the most important ones to avoid:

Editing the parent theme directly: If you update the theme, your changes will be lost. Always use a child theme.
Forgetting to call wp_head(): Removing or missing this function breaks most plugins that need to inject code into the <head> section.
Unclosed HTML tags: If you add HTML to header.php without properly closing tags, the body layout can break completely.
Not testing on a staging site: Never make changes directly on a live site. Test on a development or staging environment first.
Confusing <head> with <header>: Remember, the <head> tag is invisible metadata. The <header> tag is a visible HTML5 element. They are not the same thing.

Practical Use Cases for Separating Header from Body

Understanding how to separate the header from the body in WordPress opens up a wide range of practical possibilities:

Landing Pages Without a Header

If you are running a marketing campaign or selling a product, you may want a clean landing page with no navigation header. By using the Canvas template or a custom page template that skips get_header(), you can achieve this easily.

Different Headers for Different Page Types

An e-commerce site might want a header with a cart icon on shop pages, but a simpler header on informational pages. By using the get_header(‘shop’) approach or conditional logic inside header.php, you can create this differentiation.

Sticky Headers That Are Separate from the Page Flow

A sticky header stays fixed at the top of the browser window while the user scrolls. This is achieved using CSS (position: sticky or position: fixed). Because the header is in its own HTML element and its own PHP file, you can apply this CSS styling independently of the body content.

Best Practices for Managing the WordPress Header

Always use a child theme for any header customization to prevent loss of changes during theme updates.
Never remove wp_head() or wp_footer() from your templates. These are essential hooks that plugins and WordPress core depend on.
Keep header.php lean. Only include what is necessary for the header. Move custom scripts to functions.php using wp_enqueue_scripts.
Use semantic HTML. Use <header>, <nav>, <main>, and <footer> elements correctly to improve accessibility and SEO.
Test responsiveness. Always check that your header looks correct on mobile, tablet, and desktop screens after making changes.
Document your changes. Add comments in your PHP files so that you or another developer can understand what was changed and why.

Conclusion

Separating the header from the body in HTML within WordPress is not as complex as it might seem at first. WordPress was built with this separation in mind. The template system naturally divides the page into reusable, independent parts through files like header.php, and functions like get_header().

Whether you are using a classic theme, a block theme, or a page builder like Elementor, you have the tools to control the header and body sections independently. For beginners, the simplest path is to use the block editor or a page builder’s visual interface. For more advanced users, editing template files in a child theme or using WordPress action hooks provides maximum flexibility and control.

By mastering this concept, you gain the ability to create cleaner, more maintainable WordPress websites with flexible layouts and professional-quality designs. You will also have a much better understanding of how WordPress generates HTML, which is a foundational skill for any serious WordPress developer or website builder.

Remember to always work in a child theme, back up your files, and test changes before pushing anything to a live website. With these practices in place, you can confidently separate and customize the header and body of any WordPress site.

About the Author

Jay Patel is the Founder of XSquareSEO, a full-service SEO agency with experience in on-page SEO, eCommerce SEO, link building, technical SEO, SaaS SEO, and local SEO. For more information, feel free to contact us.

Explore More Guides

WP Archive Pages Access
Add XML File WordPress
WP Product Tabs Titles
Elementor Search Bar
ChatGPT WordPress Integration
Detect Hacked WordPress Site
Limit Audio Plays WordPress
Responsive Tables WordPress
Purge WordPress Cache
Remove WordPress Theme

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