{"id":170951,"date":"2018-03-02T13:00:06","date_gmt":"2018-03-02T13:00:06","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=170951"},"modified":"2018-02-23T19:27:30","modified_gmt":"2018-02-23T19:27:30","slug":"how-to-create-a-landing-page-template-for-your-theme","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-create-a-landing-page-template-for-your-theme\/","title":{"rendered":"How to Create a Landing Page Template for Your Theme"},"content":{"rendered":"<p>Landing pages are everywhere. If you&#8217;ve investigated SEO, or online marketing, or email list building, you&#8217;ll have been told to create a landing page for your website.<\/p>\n<p>But what exactly is a landing page, and how do you create it? In this post I&#8217;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.<\/p>\n<h3>What is a Landing Page?<\/h3>\n<p>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&#8217;t the same as your products page, or your services page, or your &#8216;about our company aren&#8217;t we fantastic&#8217; page.<\/p>\n<p>Your landing page has one job to do, and that&#8217;s to sell just one thing.<\/p>\n<p>The thing you&#8217;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&#8217;t cost anything &#8211; signing up to your mailing list, for example.<\/p>\n<p>You&#8217;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&#8217;re there, you want them to buy or sign up to the thing your landing page is pushing &#8211; nothing else. Once they&#8217;ve done that, you&#8217;ll direct them to another page thanking them and letting them browse the rest of the site.<\/p>\n<p>The thing that makes a landing page different is that laser-like focus on achieving just one thing. For many of us, it&#8217;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).<\/p>\n<p>Your landing page could have a lot of content or just a few paragraphs. Generally, the more expensive the item or service you&#8217;re selling, the more copy you need. If you just want people to sign up to a mailing list you&#8217;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&#8217;ll include multiple buttons (all linking to the same place) and lots of copy helping visitors make that decision to buy.<\/p>\n<p>Here&#8217;s the landing page on one of my sites:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/02\/landing-page-example.png\" alt=\"Example landing page - no links except the signup button\" width=\"600\" height=\"274\" \/> <\/div>\n<p>As you can see, it&#8217;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.<\/p>\n<p>You don&#8217;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.<\/p>\n<p>This means taking out all other links &#8211; and I mean all of them. That includes navigation menus, sidebars, the logo link to the homepage &#8211; even the colophon link.<\/p>\n<p>If you use a standard page template to create a landing page, you&#8217;ll increase the chances of a visitor getting distracted and moving away from the sales process. So let&#8217;s start creating a custom page template instead.<\/p>\n<h3>Creating Your Landing Page Template<\/h3>\n<p>To do this, you&#8217;ll need the following:<\/p>\n<ul>\n<li>A development installation of your site<\/li>\n<li>Your own theme, or a <a href=\"https:\/\/wpmudev.com\/blog\/how-to-create-wordpress-child-theme\/\" target=\"_blank\">child theme<\/a> of a third-party theme (don&#8217;t edit third-party themes directly)<\/li>\n<li>A code editor.<\/li>\n<\/ul>\n<p>I&#8217;ll show you the code from my own site&#8217;s landing page template as we go along.<\/p>\n<h4>Page Template or Custom Post Type?<\/h4>\n<p>First, you need to decide if you&#8217;re going to use a custom page template or a custom post type. Here&#8217;s when I would use each:<\/p>\n<ul>\n<li>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.<\/li>\n<li>Use a custom page template if you just need one landing page, for example, if you have a single mailing list signup page.<\/li>\n<\/ul>\n<p>In this example, I&#8217;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.<\/p>\n<h4>Creating the Page Template<\/h4>\n<p>In your theme, you&#8217;ll need to create a new page template. You can either do this by duplicating the <em>page.php<\/em> template or by creating a blank file and copying the contents of <em>page.php<\/em> into it. I&#8217;m calling mine <em>landing-page.php<\/em>.<\/p>\n<p>Here&#8217;s my <em>page.php<\/em> file:<\/p>\n<div class=\"gist\" data-gist=\"fbb89d37f4ecbdd858c286f93cda4e61\" data-gist-file=\"page.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/fbb89d37f4ecbdd858c286f93cda4e61.js?file=page.php\">Loading gist fbb89d37f4ecbdd858c286f93cda4e61<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Let&#8217;s just run through what that template file contains:<\/p>\n<ul>\n<li>First, a call to the <em>header.php<\/em> file.<\/li>\n<li>Then a conditional check to see if there&#8217;s a featured image. If so, this is displayed right aligned. This is quite specific to my theme &#8211; yours may or may not have something similar.<\/li>\n<li>The loop to display the page title and content.<\/li>\n<li>A call to the sidebar.<\/li>\n<li>A call to the footer.<\/li>\n<\/ul>\n<p>We&#8217;ll need to do two things to this file:<\/p>\n<ul>\n<li>Add commented text at the beginning so WordPress knows this is a page template.<\/li>\n<li>Alter that conditional statement.<\/li>\n<li>Remove the call to the sidebar.<\/li>\n<\/ul>\n<h4>Adding Commented Text for WordPress<\/h4>\n<p>At the top of your file, add a line of commented out text to tell WordPress this is a page template. Here&#8217;s mine:<\/p>\n<div class=\"gist\" data-gist=\"f51d107494c9e4cf929fc6da7ece75b0\" data-gist-file=\"page_template_comments.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/f51d107494c9e4cf929fc6da7ece75b0.js?file=page_template_comments.php\">Loading gist f51d107494c9e4cf929fc6da7ece75b0<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Now when you edit or create a page in your page editing screen, you&#8217;ll have the option to select this template in the <strong>Page Attributes<\/strong> metabox:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/02\/page-template-selector.png\" alt=\"Selecting a page template in the page editing screen\" width=\"567\" height=\"600\" \/> <\/div>\n<h4>Editing the Conditional Code<\/h4>\n<p>Now let&#8217;s edit the conditional tag. My landing page will always have a featured image &#8211; I don&#8217;t need to check for one. This is because I&#8217;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&#8217;s the new version of my code in my page template:<\/p>\n<div class=\"gist\" data-gist=\"9da895ebaa8fba61cd705456dff68837\" data-gist-file=\"loop-new.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/9da895ebaa8fba61cd705456dff68837.js?file=loop-new.php\">Loading gist 9da895ebaa8fba61cd705456dff68837<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Note that the CSS styles for layout are in my theme&#8217;s stylesheet &#8211; you&#8217;ll have to add something similar to your theme if you want the same layout.<\/p>\n<h4>Removing the Sidebar Call<\/h4>\n<p>Finally, let&#8217;s remove that sidebar call. Just delete the <code>get_sidebar()<\/code> function. Leave the footer call there &#8211; we&#8217;ll edit the footer to remove any links shortly.<\/p>\n<h3>Editing the Header and Footer<\/h3>\n<p>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.<\/p>\n<p>And your footer will probably contain a colophon with links to your homepage.<\/p>\n<p>We need to remove all those links so people can&#8217;t leave our landing page and start browsing the site.<\/p>\n<h4>Removing Navigation From the Header<\/h4>\n<p>Let&#8217;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.<\/p>\n<p>Here&#8217;s my code for the site name:<\/p>\n<div class=\"gist\" data-gist=\"13d0aac2dccf5803ad89faa6d5e23e24\" data-gist-file=\"header-site-name-before.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/13d0aac2dccf5803ad89faa6d5e23e24.js?file=header-site-name-before.php\">Loading gist 13d0aac2dccf5803ad89faa6d5e23e24<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>I don&#8217;t want to remove that link on other pages in my site, so I add a conditional tag to check if we&#8217;re on the page template, and if that&#8217;s the case, output the site name without the link:<\/p>\n<div class=\"gist\" data-gist=\"20d69188236953600212fa8b540195f2\" data-gist-file=\"header-site-name-after.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/20d69188236953600212fa8b540195f2.js?file=header-site-name-after.php\">Loading gist 20d69188236953600212fa8b540195f2<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Note that I don&#8217;t remove the name completely; just the link.<\/p>\n<p>Now let&#8217;s remove the navigation menu. You can probably work this out for yourself as you need to use the same conditional tag.<\/p>\n<p>Here&#8217;s the original:<\/p>\n<div class=\"gist\" data-gist=\"608e5e0311627a14c19d0782e86bbea7\" data-gist-file=\"nav-menu-before.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/608e5e0311627a14c19d0782e86bbea7.js?file=nav-menu-before.php\">Loading gist 608e5e0311627a14c19d0782e86bbea7<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>And here&#8217;s the revised version with the conditional tag:<\/p>\n<div class=\"gist\" data-gist=\"6ddddb50c7de3bd2a6dbbe7b7b9035ac\" data-gist-file=\"nav-menu-after.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/6ddddb50c7de3bd2a6dbbe7b7b9035ac.js?file=nav-menu-after.php\">Loading gist 6ddddb50c7de3bd2a6dbbe7b7b9035ac<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Simple!<\/p>\n<h4>Removing Links From the Footer<\/h4>\n<p>Now let&#8217;s move on to the footer. In my <em>footer.php<\/em> file I have code for a colophon:<\/p>\n<div class=\"gist\" data-gist=\"a8bcdf058704504fbc024326d51adcfa\" data-gist-file=\"colophon-before.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/a8bcdf058704504fbc024326d51adcfa.js?file=colophon-before.php\">Loading gist a8bcdf058704504fbc024326d51adcfa<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>I need to add a conditional tag around that link to the home page, just as I did earlier:<\/p>\n<div class=\"gist\" data-gist=\"4e87d7ed25604af38a3631b2c3c8dda4\" data-gist-file=\"colophon-after.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/4e87d7ed25604af38a3631b2c3c8dda4.js?file=colophon-after.php\">Loading gist 4e87d7ed25604af38a3631b2c3c8dda4<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>If you want you can also do this for the WordPress link &#8211; I challenge you to do this without any help from me!<\/p>\n<h3>Editing the Stylesheet<\/h3>\n<p>The final step is to edit styling for the page template so that the content is displayed at full-width.<\/p>\n<p>I have the following layout styling for my content and sidebar by default:<\/p>\n<div class=\"gist\" data-gist=\"3029f7db025edf2cffdcf3ddc1c7a76d\" data-gist-file=\"style-default.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/3029f7db025edf2cffdcf3ddc1c7a76d.js?file=style-default.css\">Loading gist 3029f7db025edf2cffdcf3ddc1c7a76d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>I need to add some styling to target the content just on this page template:<\/p>\n<div class=\"gist\" data-gist=\"79e5ae89847b35b5daea6bb967ee1c31\" data-gist-file=\"style-new.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/79e5ae89847b35b5daea6bb967ee1c31.js?file=style-new.css\">Loading gist 79e5ae89847b35b5daea6bb967ee1c31<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Note that you don&#8217;t have to add any extra styling for the sidebar &#8211; it won&#8217;t be displayed on your custom page template as it isn&#8217;t called from the file.<\/p>\n<h3>Creating Your Pages<\/h3>\n<p>The last step is to create your landing page. You actually need to create two &#8211; the landing page and the signup page. This is because people are much more likely to complete a signup form if they&#8217;ve already clicked a button to get to it. I think it&#8217;s because clicking that button represents a commitment to the process.<\/p>\n<p>Create two pages in your WordPress admin, both using your new landing page template. One will include text enticing people to click and <a href=\"https:\/\/wpmudev.com\/project\/forminator-pro\/\" target=\"_blank\">the other will include a form &#8211; and only a form<\/a>.<\/p>\n<p>If you click on the button in the landing page on my site, you get this simple signup page:<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/02\/signup-page-example-e1518533623760.png\" alt=\"Signup page example\" width=\"600\" height=\"220\" \/> <\/div>\n<p>That page uses the same template as my landing page. In both cases I&#8217;ve added the same featured image. Doing this reinforces the message that people will get that freebie if they sign up &#8211; and including visuals makes your page more attractive and increases conversions.<\/p>\n<h3>A Landing Page Template Will Increase Your Conversion Rates<\/h3>\n<p>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.<\/p>\n<p>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!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Landing pages are everywhere. If you&#8217;ve investigated SEO, or online marketing, or email list building, you&#8217;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&#8217;ll explain what makes a landing page different from a normal page [&hellip;]<\/p>\n","protected":false},"author":347011,"featured_media":171175,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[10092,10866,9825],"tutorials_categories":[],"class_list":["post-170951","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-wordpress-landing-pages","tag-free-tutorials","tag-landing-pages"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/170951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/347011"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=170951"}],"version-history":[{"count":9,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/170951\/revisions"}],"predecessor-version":[{"id":171177,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/170951\/revisions\/171177"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/171175"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=170951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=170951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=170951"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=170951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}