Build a Landing Page Template for WordPress
A few of my clients have requested landing pages for their websites. They wanted a way to use WordPress on the backend to make it easy to edit and add forms via the Gravity Forms plugin.
In this example, we’ll build a landing page template off of the 2010 theme by means of a child theme. This will keep all changes protected from updates to the parent theme. The steps shown here could be used to build a landing page template for most other WordPress themes. You’ll need to be comfortable with editing WordPress template files, and know some CSS to make the final customizations. The code is available to check out at GitHub.
If you’re looking for a custom landing page solution that will integrate nicely into another theme, contact me for a quote.
Step 1: Add a new page with your landing page content. In our example you’ll see that I wrote up some typical landing page copy along with a signup form.
Step 2: Add a new folder to the theme directory, we’ll call it “twentytenland”
Step 3: Open a new document in your favorite editor, paste in the following CSS, then save this as “style.css” in the twentytenland folder.
/* Theme Name: Twenty Ten Land Description: A Child Theme of Twenty Ten Template: twentyten */ @import url(../twentyten/style.css);
Step 4: Now we need to copy three files from the parent theme: header.php, footer.php and onecolumn-page.php. The 2010 theme has a one-column page template. If the theme you’re working with has one, use that. If not, use the regular page template. Paste these into the new child theme folder. Now we’ll modify these three new templates contained here.
Step 5: Modify the header template: Rename header.php to header-landing.php We’re going to remove the code and markup that produces the banner and navigation menu. Remove everything inside the header div. Now save this document. You could even remove the header div completely, but you might use it to put a minimal header in later.
Step 6: Modify the footer template: Rename footer.php to footer-landing.php. I removed the “site-info” and “site-generator” divs. I left in the sidebar footer code because it might be useful to have those widgets available. For example, you could put a contact form in one, a testimonial in another, etc.
Step 7: Modify the page template: Rename onecolumn-page.php to landing-page.php. Make the changes as shown below:
Step 7.5: With a recent WordPress update, the bundled version of the twentyten one column page template now calls the standard page loop which includes a comment block. Probably the simplest way to avoid including a comment form would be to turn off comments for this page. Look for the “Discussion” meta box and uncheck “Allow Comments”. If you can’t find the “Discussion” you will need to enable it from the “Screen Options” tab located in the upper right corner of the admin screen.
Step 8: Now head back to the WordPress admin panel and switch to this new theme. Then edit your example landing page. Inside the box labeled “Page Attributes” you can now choose “Landing Page.”
Step 9: Customize the CSS: You can now change the appearance with a few lines of CSS. In our example, I added a light background texture, and added some color and text shadow to the title and main heading. Note the body class used here to make these new styles only apply to our landing page template.
/* Theme Name: Twenty Ten Land Description: A Child Theme of Twenty Ten Template: twentyten */ @import url(../twentyten/style.css); .page-template-landing-page-php #wrapper{ background:#fff url(images/bg-texture.png); } .page-template-landing-page-php #content .entry-title { color: #703999; font-size: 64px; text-shadow: 2px 2px 2px rgba(112,58,151,.2); } .page-template-landing-page-php h1 { text-shadow: 2px 2px 2px rgba(255,255,255,.8); }
The example landing page:
Here are a few references to help you design, write and test better landing pages:
- Seal the Deal: 10 Tips for Writing the Ultimate Landing Page
- How to Create a ‘Landing’ Page Template using the Genesis Theme Framework. It’s much easier to do with Genesis.
- Landing pages: ten top tips
- 5 Beautiful Landing Pages That Prove Great Design Still Sells Landing pages don’t need to be ugly.
- How to do A/B Testing in WordPress Test and iterate!
Comments (9)
Great article – but I think you have left out a step (between step 7 and 8) – you have to activate the child theme before the landing page template will be available.
Thanks David, nice catch. I added the missing step in. Glad you found this post useful.
GREAT POST- just what I was looking for!
How do I activate the child theme? I am unable to activate. I’m assuming I’m missing some minor step. Please help. 🙂
The child theme should show up in the Appearance>themes menu, activate it there.
Hi Josh,
Trying out your tutorial, but activating the child theme would mean my whole website has the “landingspage” theme, right??
Or is your starting point just an one page website??
I am just starting out with child themes
ps i guess default template = newly created landings template page???
Alex, we’re only adding templates here. So the child theme will still use the parent theme’s set of templates. So you can still use 2010’s default template for normal pages.
Hi josh,
Thanks for answering. I followed you tutorial but the page which were set to the default page somehow load the new landingspage layout? I have to select the one column page template for each page?
I am testing with a clean setup
Regards