How to Create a Landing Page Template for Your Theme
How to Create a Landing Page Template for Your Theme
Landing pages are everywhere. If you’ve investigated SEO, or online marketing, or email list building, you’ll have been told to create a landing page for your website.
But what exactly is a landing page, and how do you create it? In this post I’ll explain what makes a landing page different from a normal page on your site, and show you how to create a page template file for your theme so you can have your own landing pages.
What is a Landing Page?
A landing page is a special page on your site which is designed to sell something. An effective landing page will be simple and sell just one thing. It isn’t the same as your products page, or your services page, or your ‘about our company aren’t we fantastic’ page.
Your landing page has one job to do, and that’s to sell just one thing.
The thing you’re selling could vary. It could be a subscription to a service or course. It could be a single product. Or it could be something that doesn’t cost anything – signing up to your mailing list, for example.
You’ll use your landing page in conjunction with SEO and other online marketing to get people to come to your site and arrive at that page. Once they’re there, you want them to buy or sign up to the thing your landing page is pushing – nothing else. Once they’ve done that, you’ll direct them to another page thanking them and letting them browse the rest of the site.
The thing that makes a landing page different is that laser-like focus on achieving just one thing. For many of us, it’s getting an email address to add to our mailing list (this is how I use landing pages), or it might be getting someone to subscribe to a service (such as a WPMU DEV subscription).
Your landing page could have a lot of content or just a few paragraphs. Generally, the more expensive the item or service you’re selling, the more copy you need. If you just want people to sign up to a mailing list you’ll need information on the sign-up magnet (a freebie as an encouragement to sign up, such as a download) and a link to click for people to sign up. For a longer page, you’ll include multiple buttons (all linking to the same place) and lots of copy helping visitors make that decision to buy.
Here’s the landing page on one of my sites:
As you can see, it’s really simple. It has no links and just one button, which takes you through to a signup form. I need to refine the copy (the site is still under development) but you can see how simple it is.
You don’t want to give people the option to do anything else on your landing page, which is why you need a dedicated template for it. The page will have no links taking the visitor away from the sales or subscription process. The only links on that page (and they should be nice obvious buttons) will represent the top of your sales funnel.
This means taking out all other links – and I mean all of them. That includes navigation menus, sidebars, the logo link to the homepage – even the colophon link.
If you use a standard page template to create a landing page, you’ll increase the chances of a visitor getting distracted and moving away from the sales process. So let’s start creating a custom page template instead.
Creating Your Landing Page Template
To do this, you’ll need the following:
- A development installation of your site
- Your own theme, or a child theme of a third-party theme (don’t edit third-party themes directly)
- A code editor.
I’ll show you the code from my own site’s landing page template as we go along.
Page Template or Custom Post Type?
First, you need to decide if you’re going to use a custom page template or a custom post type. Here’s when I would use each:
- Use a custom post type if you plan to create multiple landing pages to support multiple marketing campaigns or multiple products. This gives you more flexibility.
- Use a custom page template if you just need one landing page, for example, if you have a single mailing list signup page.
In this example, I’m going to use a custom page template. You can apply the principles here to the template files for single posts of your custom post type if you like.
Creating the Page Template
In your theme, you’ll need to create a new page template. You can either do this by duplicating the page.php template or by creating a blank file and copying the contents of page.php into it. I’m calling mine landing-page.php.
Here’s my page.php file:
Let’s just run through what that template file contains:
- First, a call to the header.php file.
- Then a conditional check to see if there’s a featured image. If so, this is displayed right aligned. This is quite specific to my theme – yours may or may not have something similar.
- The loop to display the page title and content.
- A call to the sidebar.
- A call to the footer.
We’ll need to do two things to this file:
- Add commented text at the beginning so WordPress knows this is a page template.
- Alter that conditional statement.
- Remove the call to the sidebar.
Adding Commented Text for WordPress
At the top of your file, add a line of commented out text to tell WordPress this is a page template. Here’s mine:
Now when you edit or create a page in your page editing screen, you’ll have the option to select this template in the Page Attributes metabox:
Editing the Conditional Code
Now let’s edit the conditional tag. My landing page will always have a featured image – I don’t need to check for one. This is because I’ll have an image of the free download that people receive when they sign up to my mailing list. I also want to change the layout. Here’s the new version of my code in my page template:
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Note that the CSS styles for layout are in my theme’s stylesheet – you’ll have to add something similar to your theme if you want the same layout.
Removing the Sidebar Call
Finally, let’s remove that sidebar call. Just delete the
get_sidebar() function. Leave the footer call there – we’ll edit the footer to remove any links shortly.
Editing the Header and Footer
Not all of the content and links in each page on your site are in the template file. The header contains your navigation menu as well as a link to your home page via your logo or site name. It may also contain other links in your header banner.
And your footer will probably contain a colophon with links to your homepage.
We need to remove all those links so people can’t leave our landing page and start browsing the site.
Removing Navigation From the Header
Let’s start with the header. There are two things you want to get rid of: the link around your logo or site title, and your navigation menu.
Here’s my code for the site name:
I don’t want to remove that link on other pages in my site, so I add a conditional tag to check if we’re on the page template, and if that’s the case, output the site name without the link:
Note that I don’t remove the name completely; just the link.
Now let’s remove the navigation menu. You can probably work this out for yourself as you need to use the same conditional tag.
Here’s the original:
And here’s the revised version with the conditional tag:
Removing Links From the Footer
Now let’s move on to the footer. In my footer.php file I have code for a colophon:
I need to add a conditional tag around that link to the home page, just as I did earlier:
If you want you can also do this for the WordPress link – I challenge you to do this without any help from me!
Editing the Stylesheet
The final step is to edit styling for the page template so that the content is displayed at full-width.
I have the following layout styling for my content and sidebar by default:
I need to add some styling to target the content just on this page template:
Note that you don’t have to add any extra styling for the sidebar – it won’t be displayed on your custom page template as it isn’t called from the file.
Creating Your Pages
The last step is to create your landing page. You actually need to create two – the landing page and the signup page. This is because people are much more likely to complete a signup form if they’ve already clicked a button to get to it. I think it’s because clicking that button represents a commitment to the process.
Create two pages in your WordPress admin, both using your new landing page template. One will include text enticing people to click and the other will include a form – and only a form.
If you click on the button in the landing page on my site, you get this simple signup page:
That page uses the same template as my landing page. In both cases I’ve added the same featured image. Doing this reinforces the message that people will get that freebie if they sign up – and including visuals makes your page more attractive and increases conversions.
A Landing Page Template Will Increase Your Conversion Rates
Taking the time to create a template file for your landing pages will make them many times more effective. Anyone arriving at your site on this page, or clicking a button in your site to get to it, will have nowhere else to go.
If you follow the steps in this post you can create your own landing page template, making it easy for you to add landing pages to your site in the future. This will help you sell your product or convert visitors to subscribers. Good luck!