How to create a custom page template in WordPress

If you've been in business online for any amount of time, you'll likely have heard you need to remove the header and footer from landing pages and sales pages. Are you stuck on how to create a page without headers and footers? Click through to the post to learn how to create a very simple custom page template.

If you’ve been in business online for any amount of time, you’ll likely have heard you need to remove the header and footer from landing pages and sales pages.

Creating your own sales page? Get started on the right foot with my free guide on How to create the perfect launch design inspiration board. 

Are you stuck on how to create a page without headers and footers? I’m going to walk you through creating a very simple custom page template.

First things first: check your theme

A lot of themes and page builders have a template included just for these kinds of pages, so check if yours has such a template before you decide to install any plugins or dive into the code to add one yourself.

You can check what page templates your theme has by opening the edit screen for any page. In the page settings (click the little cogwheel if it’s not open on your screen), there’s a section Page Attributes.

If your theme has multiple templates you can choose from, you’ll see the option for Template and you’ll be able to select one from a dropdown.

In this theme, there’s a No Header/Footer template that’s exactly what you need for a sales page or landing page. This may have a different name in your theme, so check to see if you already have something like this available to you.

Option 1: Use a plugin

If your theme (or page builder) doesn’t come with a blank template, another quick and simple option is to install the free Blank Slate plugin, which adds a Blank Slate page template for your site.

Option 2: Use code

If you don’t want to install a separate plugin for this, you can also add a page template to your theme by creating one yourself. Every theme is different, so this requires a bit of experimentation on your part.

Create the custom page template

Create a child theme if you haven’t done so already.

To create a template for one specific page, copy your existing page.php file and rename it with your page’s slug or ID:

  • page-{slug}.php
  • page-{ID}.php

For example: Your About page has a slug of ‘about’ and an ID of 6. If your active theme’s folder has a file named page-about.php or page-6.php, then WordPress will automatically find and use that file to render the About page.

Usually, you’ll want a more generic page template, like a Sales page template you can re-use for different offers. We’re going to create a Sales page template that doesn’t have the header and navigation from your main site, so an empty page with just the page content, using the featured image as a header image.

Copy the existing page.php file (or an existing full-width page template or whichever one is closest to what you want) and rename the copy to page_sales.php. You could also call it page-sales.php, but then WordPress will see it as a specialized template that would apply to a page that has the slug ‘sales’. You can still select it as a template on other pages, and if you’re not going to ever have a page called “Sales” there shouldn’t be a problem, but if you were to ever have a page with whatever slug we now choose (in this case, ‘sales’), the template would automatically apply to that page, whether you wanted it to or not.

Open the file and at the top, insert (or edit, if you’ve copied a different template):

<?php /* Template Name: Sales Page */ ?>

Now we’re going to move a bit of code around. To see what you’re doing, it’d be easiest to upload your new sales page template file and create a test page using the template, then re-upload the file with each change you’re making and look at your test page to see what’s happening.

Once you upload the file to your theme folder, go to the Page > Edit screen in your admin dashboard. On the right-hand side under attributes, you’ll see Template. This is where you can select a template to use for the page you’re editing.

Removing stuff you don’t want on your landing or sales pages

Each theme is different, so we’ll start by taking out all of the header and footer stuff. Usually, your theme will have these in the page code:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Get rid of it all. See what it does. It takes out all of the header stuff, the sidebar and the footer stuff. You don’t want all of the header stuff gone, because it’s likely now the styling broke. Put the <?php get_header(); ?> and <?php get_footer(); ?> back where they were.

Copy the header.php to header-sales.php, and the footer.php to footer-sales.php. Then edit your sales page template to get these specific header and footer files instead of the regular ones:

<?php get_header('sales'); ?>

and

<?php get_footer('sales'); ?>

Now, let’s open the header-sales.php and see what we can take out. As I said, every theme is different so this requires some experimenting on your part and seeing what does and doesn’t work for you.

First, take out all of the code that’s under the <body> tag. In the footer-sales.php, take out all the code that’s above the </body> tag. Take care not to remove any of these codes:

<?php wp_head(); ?>

(this should be inside the <head> and </head> tags anyway, not in the body)

<?php wp_footer(); ?>

or any analytics code you might want to keep.

See how that changes things. Did your content spread to the full width of the browser window? Undo the changes, and remove block by block. Get rid of the navigation, get rid of any widget areas you don’t want on your sales page.

Set a full-width header image for your landing or sales pages

When you’ve removed everything you don’t want, it’s time to add or move around some other stuff. If there already is code for a featured image on the page, is it where you want it? If you want it to be at the top of the page, move it to be directly underneath the get_header(‘sales’); code. If you want it at the top of the content container, move the code to be inside and at the top of the container. If it’s there isn’t a featured image code, add it.

<?php // check if the post has a Post Thumbnail assigned to it.
               if ( has_post_thumbnail() ) {
                    echo '<div class="featured-image">' . get_the_post_thumbnail() . '</div>'; } ?>

Alright! All the basics have been set up, but you might still want to add some more styling for your sales page template. Especially if you want the featured image at the very top of your page and full-width, you might like to remove the margin and padding from the page to remove any kind of border that gets in the way of your full-width image. First, make sure you have the body_class() function in your body tag, like so:

<body <?php body_class(); ?>>

Now, whenever you select your template on a page, the body will have a class of page-template-page-sales where page-sales is the filename you used for your page template. If you want styling for any specific page, it also gets a class with the page ID (page-id-1) that you can use to add styling just for that one page. To remove any edges on your page and allow your featured image to spread to full-width of the page (or the content container, depending on where you placed the code), add this styling to your theme’s style.css:

.page-template-page-sales {margin:0;padding:0;}
.page-template-page-sales .featured-image {max-width:100%;height:auto;}

That’s it! Now you can use your custom page template on any page you like.

Creating your own sales page? Get started on the right foot with my free guide on How to create the perfect launch design inspiration board. 

Want to learn how to make a beautiful sales page yourself?

PinterestVisionBoard-preview

Sign up for my guide How to create the perfect launch design inspiration board and make sure to also read the follow-up emails teaching you how to go from inspiration board to an actual brand board you can use to create a beautiful sales page.

Just click the button below to get it, free!