How to Use Your Existing WordPress Header and Footer on Custom Template Pages (Step-by-Step Guide)

April 13, 2025

2 Min Read

45 Views

When building a custom page template in WordPress, many developers and site owners want to retain the existing site’s header and footer for design consistency. Thankfully, WordPress makes it easy to include your site’s header and footer in your custom templates using built-in PHP functions.

Table Of Content

✅ Why Use the Existing Header and Footer?
Step 1: Create Your Custom Template File
Step 2: Include the Existing Header and Footer
Step 3: Upload or Save Your Template File
Step 4: Apply the Custom Template to a Page

In this post, we’ll walk you through how to use your existing WordPress header and footer in a custom template page, without affecting the rest of your theme.

✅ Why Use the Existing Header and Footer?

Keeps your custom pages visually consistent with the rest of your site
Saves development time by reusing layout and navigation elements
Ensures SEO, tracking codes, and global scripts (like Google Analytics) stay functional
Maintains responsive design and mobile-friendliness

🔑 Primary Keyword:

Use existing header and footer in WordPress custom template

🛠️ Step-by-Step: How to Use Existing Header and Footer in WordPress Custom Template Page

Step 1: Create Your Custom Template File

Open your theme folder:
wp-content/themes/your-theme-name/
Create a new PHP file, for example:
custom-template.php
Add the following code at the top of the file to define it as a custom page template:

<?php

Template Name: Custom Template with Header and Footer

Step 2: Include the Existing Header and Footer

To use the existing site’s header and footer, use the built-in WordPress functions:

<?php get_header(); ?>

<!– Your custom content goes here –>

<h1>This is a Custom Template Page</h1>

<p>You can place your custom HTML, shortcodes, or PHP here.</p>

</div>

<?php get_footer(); ?>

get_header(); pulls in your theme’s header.php
get_footer(); pulls in your theme’s footer.php

These files often contain your site’s logo, navigation, scripts, and closing HTML tags—so don’t skip them!

Step 3: Upload or Save Your Template File

Save the custom-template.php file into your active theme folder.
Make sure it’s located in the root of the theme directory (not inside subfolders unless referenced properly).

Step 4: Apply the Custom Template to a Page

Go to your WordPress Dashboard → Pages → Add New (or edit an existing page)
In the Page settings sidebar, look for Template under Page Attributes
Select “Custom Template with Header and Footer”
Publish or Update the page

Your custom template page will now use the default WordPress header and footer.

✅ Bonus Tips

You can also use get_sidebar(); if your layout includes a sidebar.
Want to conditionally load different headers or footers? Use get_header(‘custom’); to load header-custom.php.
Keep your custom content wrapped in the same <div class=”container”> or layout classes used in your theme to ensure design alignment.

Now you know how to use the existing WordPress site’s header and footer in a custom template page. This method ensures your custom pages match the design and structure of the rest of your site while giving you full control over the content in the middle.

Using get_header() and get_footer() is the WordPress best practice for reusing design elements, improving maintainability, and keeping your website looking polished.

				
					<?php

/* Template Name: Custom Code Page */
get_header(); // This pulls the existing header
?>

<!-- Your custom HTML, CSS, JS starts here -->
<div class="custom-code-content">
    <h1>Hello from Custom Code Page!</h1>
    <p>This is your custom-designed content.</p>
    <script>
        console.log('This is a custom script');
    </script>
</div>

<!-- End custom code -->
<?php
get_footer(); // This pulls the existing footer
?>

Last Update: April 13, 2025