How To Create a Custom WordPress Page Template With Custom Header and Footer

  • follow us in feedly
Published September 19, 2013 by Brad Knutson
WordPress Custom Template with Custom Header and Footer

I’ve always thought of WordPress as a blank canvas on which designers and developers can create anything they can dream up. The only limitation is your imagination (or perhaps your programming ability…). Whether you are using WordPress for a blog, a marketing campaign, a lead-generation page, an eCommerce site, or something else – you can accomplish it all with WordPress and plugins.

During a recent conversation with a client, it struck me that not everyone views WordPress this way. For the uninitiated, WordPress might be seen as a place to post content into a pre-formatted template. For someone who’s not familiar with WordPress theming, WordPress might seem like a very limited CMS – one that you can only edit body content.

The reality of the situation is that WordPress is the blank canvas that I see it as. Let’s say you have a WordPress site with a custom premium theme with a really nice header and footer – but you are about to run a marketing campaign that you want hosted on the same domain and editable through WordPress, and it requires a different header and footer. Let’s dive in and I’ll explain how you can accomplish this with custom templates.

Creating a Custom Template

  1. Create a new PHP file, and name it appropriately. I’ll name my template custom-page-template.php.
  2. Declare the template by adding the following to the top of your template.
    <?php
    /**
     * Template Name: Custom Page Template
     */
    ?>

    Name the template appropriately, as this will come into play later.

  3. After your template name declaration, use WordPress’ built in get_header() function to call your header. The parameter of the function can be left empty to call the default header, otherwise enter a value to include your custom header.
    get_header('custom'); ?>

    In this case, I choose the parameter of 'custom'. I’ll talk about more what that means later. You can choose any value here, but make sure it’s appropriate for your theme and something you’ll recall in a few steps.

  4. Fill out your template with your custom WordPress code. I’ll leave this part up to you.
  5. Close your template with WordPress’ built in get_footer() function with an optional parameter.
    <?php get_footer('custom'); ?>

    I again chose the paramter 'custom' but you can again choose whatever you want. Also, it doesn’t have to be the same value as your custom header template. I’ll talk more about what this will include in a moment.

Optional: Create a Custom Header Template

If you choose to include a custom header template, we’ll need to create one. The default header template for most themes is usually called header.php. Create a new PHP file, and name it in the following format:

header-{parameter}.php

Replace {paramter} with whatever you entered as your parameter in your get_header() function call in your custom template. Since I choose a parameter of 'custom', my custom header template will be named:

header-custom.php

The way WordPress’ get_header() function works is that if it doesn’t find your custom template it falls back on the default header.

At the top of your header template, make sure you add a few lines of comments to explain what the template is and does. It’s good practice!

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till
<div id="main">
 *
 */
?>

Optional: Create a Custom Footer Template

Create your custom footer template in the same fashion you created our custom header template. The naming format goes like so:

footer-{parameter}.php

So, because I choose my get_footer() parameter as 'custom', my custom footer template would be named:

footer-custom.php

It’s also important to add comments at the top of the form to remind yourself or another developer what the template is.

<?php
/**
 * The template for displaying the footer.
 *
 * Contains footer content and the closing of the
 * #main and #page div elements.
 *
 */
?>

Choosing Your Custom Template For Your Page

Now that we’ve created our custom template, and our custom header and footer, we need to create a new page in WordPress.

From the WordPress admin dashboard, create a new page. Add your title and content. On the right sidebar, in the Page Attributes section, select your template from the Template dropdown.

WordPress Page Template Dropdown

We’re Finished!

That’s all there is to it! Publish your page and check out your new template!

Creating custom templates is a great way for marketers to publish unique marketing pages that break out of the default WordPress theme’s header and footer. It’s also a great way to build a unique home page, while having the rest of your site follow your themes pre-determined templates.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

4 thoughts on “How To Create a Custom WordPress Page Template With Custom Header and Footer

  1. Wiepkje Spoelstra

    Hey Brad,

    Your manual helped me a lot. Thanks a lot. I’ve only one question for you: Where in the heaeder-custom.php and the footer-custom.php do I insert the backgroundimage?

    This is what I want. Per page I have a different template with different backgroundimages for the header (.site-header .home-link) , navigation (.navbar) and footer-sections (.site-footer .sidebar-container). For example, see http://www.turningthetables.nl/nieuwewebsite/projecten/

    Can you help? Thanks in advance, Wiepkje

    Reply
    1. Brad Knutson Post author

      Hey Wiepkje,

      You’ll actually want to set the background image in the CSS. When you’re creating your header and footer templates, make sure you give each section a unique class so you can apply unique styles to it in the CSS. Hope this helps!

      Thanks,
      Brad

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">