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.
standard 2010 page

Step 2: Add a new folder to the theme directory, we’ll call it “twentytenland”
Newly created folder shown in the Finder window

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:
Landing Page template modifications

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.”
Landing Page Template option now appears in the WordPress admin

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:

A landing page built with the WordPress 2010 theme
Now make it your own!

Here are a few references to help you design, write and test better landing pages:

26. October 2010 by joshfeck
Categories: Tutorials, WordPress | 9 comments

Comments (9)

  1. 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.

  2. Thanks David, nice catch. I added the missing step in. Glad you found this post useful.

  3. GREAT POST- just what I was looking for!

  4. How do I activate the child theme? I am unable to activate. I’m assuming I’m missing some minor step. Please help. :)

  5. The child theme should show up in the Appearance>themes menu, activate it there.

  6. 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

  7. ps i guess default template = newly created landings template page???

  8. 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.

  9. 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