How to create a custom page template in WordPress

Do you struggle to make your landing and sales pages look awesome, each time you add such a page? Learn how to create a very simple custom page template.

Do you struggle to make your sales pages look awesome, each time you add some kind of sales page? Or wish you could just remove the header so the page would be more like a landing page and stand on its own? Not everyone is ready for the investment of getting a custom designed & developed sales page, so I’m going to walk you through creating a very simple custom page template. But, because every theme is different, it’s going to require some experimentation on your part.

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.

Create the custom page template

Create a child theme if you haven’t done so already. Copy the exisiting 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 Template */ ?>

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.

Select your page template

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. Like 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. Let me know if you’re having trouble with any of it, or share a page that’s using your new page template!

Get your Website Strategy Workbook to improve your website and turn more visitors into clients.

websitestrategyworkbook-preview

Click the button below to get it, free!