How to Create and use Custom Page Template in WordPress to Create a Sales Page
Categories: Make Money, Shop Admin Tips, Wordpress
I received the following question today in the forum:
“For certain sales pages on my site I do not want to have the distraction of the sidebar items. Is there a way to have a second page template without a sidebar for this purpose?”
Having an optimized sales/landing page does help with sales conversion and it is really easy to create a custom sales/landing page in WordPress. Any readers of this site using the WordPress Simple Shopping cart or WordPress eStore or the WordPress Membership Plugin are most likely selling something online. In this article I have explained how you can create a custom sales page easily in WordPress and use it to optimize your sales conversion.
How do You Create a Custom Sales Page in WordPress?
The answer is custom WordPress page template. Your WordPress theme has a file called “page.php”. When you create a WordPress page, by default it uses this “page.php” template file which makes the page look a certain way. You can easily create another template file which has a different look/structure and use that template file for a particular page.
Say for example, the default “page.php” file displays the page with “header”, “body”, “sidebar” and “footer”. You can create a custom template called “sales-page.php” and make it only display “header”, “body” and “footer”. Now, when you create a page and specify it to use the “sales-page.php” template file then essentially you are making a page without any sidebar (kind of like what the usual sales page look like). You can pretty much custom every aspect of the look and feel of this page by modifying the “sales-page.php” template file.
Now that you know that creating a sales page in WordPress is basically creating a custom page template and using it for that particular page, the next question is how do you create this custom page template (e.g. sales-page.php).
How to Create and Use a Custom WordPress Page Template
Step1: Create the template file
Use a simple text editor (you can use a PHP editor too) to create a file called “sales-page.php” (you can give it any name) and add the following code to it:
<?php
/*
Template Name: Sales Page
*/
//Display the header
get_header();
//Display the page content/body
if ( have_posts() ) while ( have_posts() )
{
the_post();
the_content();
}
//Display the footer
get_footer();
?>
- You first specify the template name, in this case I used “Sales Page”. The “Template Name: Sales Page” tells WordPress that this will be a custom page template. The name “Sales Page” will show up in the drop down menu so you can easily identify this template and select it for a particular page when when you need.
- Then call the header of the theme (get_header) which displays the theme header (your header banner, logo etc).
- The WordPress ‘loop’ is there to show the content of the page.
- At the end you include the theme footer (get_footer).
Step2: Upload the newly created template file
Before you can use it, you need to upload this template file to your current theme’s directory. Usually it will be in the following location on your server:
“/wp-content/themes/my-theme” where “my-theme” is your theme name.
Step3: Use the template file for a WordPress page
You are now ready to use this template file. Create a new WordPress file or edit an existing one. Just make sure to select this new created template file as the “Template” for this page from the “Attributes” section. Save the page and hit “Preview” to see how it looks.
Use a Custom Page Template
Download the Basic Sidebar Free Template File
You can download the example template file from here if you don’t want to create it yourself.
Side Notes
This requires a bit more fiddling around but you can customize the page width, color scheme and all that type of stuff by modifying the “sales-page.php” file. Remember, it’s a PHP file so you can use plain “HTML” on that file too.
If you are selling just one product for your site and want to set this sales page as your homepage then you can do so by configuring the “Readings” settings (Settings -> Reading) of your WordPress installation. Simply select the “Front page displays a Static page” option and choose this page from the drop down menu.
Note: You do not need a custom page template to use the static front page option. You can create any page with the content you want for the front page and then choose the static front page option as above.
How you want to design and structure your sales page is completely up to you. I only tried to cover the very basic type of sales page in this article… so feel free to let your creativity fly.
#1 by Pamela on March 15, 2010 - 7:24 am
Thanks a lot! Very useful post.
#2 by Jamie on March 17, 2010 - 12:34 am
Thanks for sharing this fantastic article. I have a quick question… How do you add an image in this custom template?
#3 by admin on March 17, 2010 - 12:57 am
@Jamie, You can use the wordpress editor to insert images on your page like you normally do. If you are talking about adding image in the actual template file then you just have to add the HTML code for embedding an image.
#4 by prof on May 13, 2010 - 5:42 am
useful post!!!!
#5 by Josh Wagner on June 8, 2010 - 5:02 am
hey i was just wondering is it possible to make a template file but without the header function?
I’ve tried loads of times with the following code:
I just want a page with just the content. The above code works but i get the whole header thing come up which is what i dont want. I’ve tried just removing the header function but then the page just comes up blank. Any ideas?
#6 by admin on June 9, 2010 - 5:08 am
Yes, you can make a template anyway you want it. You can even just make a template by writing your own HTML code. Remember, some themes have part of the header in it’s body so if you are calling the body some of the header may come with it too. It’s best to write the template from scratch for situations like this. All you have to do is query wordpress for the post or page and then display the title of the post then the content of the post and that code can go in your template. This post might be of some help to you:
http://www.tipsandtricks-hq.com/query-or-show-a-specific-post-in-wordpress-php-code-example-44
You can also make your page in a basic HTML editor then copy that code in the template file and use that.
#7 by Josh Wagner on June 10, 2010 - 2:50 am
thanks i’ll try that
#8 by Starting a blog on June 16, 2010 - 10:17 pm
Great tip. This is just what I was looking for.
Starting a blog´s last blog ..How to Make Your YouTube Video Autoplay
#9 by DelBoy on July 2, 2010 - 1:26 am
Thanks for the help. I was having trouble with getting the new template to show up in attributes until I realised I hadn’t named the new template.
DelBoy´s last blog ..Project 365 – June 2010
#10 by DeAnna Troupe on July 16, 2010 - 3:08 am
I almost had a nerdgasm when I saw this post! Thanks a bunch. That solves a huge problem I was having.
DeAnna Troupe´s last blog ..Blogging series-more principles to adopt for a successful blog
#11 by Aswad on August 17, 2010 - 4:41 pm
Hello Amin,
Thanks for this post. I have one question though.
Since I don’t know any coding, I simply copied and pasted the code lines you give in this post.
It works with Infinity Remix, but it gives me a grey background.
What code do I have to write to make the white background square appear in the page ?
Thank you.
#12 by admin on August 18, 2010 - 12:33 am
Hi Aswad, it should just be a matter of changing the CSS. Can you please post a link to the page in question?
#13 by Aswad on August 18, 2010 - 10:39 am
Sure, here it is :
http://toucherlavie.com/solutions-sante/sciatique/
#14 by admin on August 19, 2010 - 8:19 am
Here is the piece of CSS that’s giving that background:
#page {
background:none repeat scroll 0 0 #ECECEC;
font-size:0.7em;
margin:0 auto;
padding:10px;
width:940px;
}
It’s better if you add a div block around your content and then apply specific CSS to that div.
#15 by hasitha on August 25, 2010 - 1:06 pm
Fantastic !!! Fantastic !!!
Another superb post, keep it up friend.