How to Create a Simple Landing Page in Thesis That Converts

This article is deprecated! Any technical information refers to software versions that are now obsolete. Please visit the DIYthemes Blog for current updates, or check out the old Thesis Blog for a treasure trove of website marketing insights.

One of the most bulletproof ways to convert a visitor into a subscriber or buyer is to direct them to a page that convinces them to become one.

What type of page do you need? You need a landing page, a simple page with few distractions and one main goal.

You’ve likely seen these pages in the blogosphere, but for a real-life example, look no further than the WordPress SEO series on DIYthemes.

When you use Thesis, you can create a squeeze page with ease, but there are a few crucial parts missing from that tutorial and today I’m going to expand on them.

But let’s start from scratch, and I’ll show you how to build a complete landing page system in 4 easy steps.

Step 1: Create The Squeeze Page in WordPress

Firstly, all you need to do is create a regular page in WordPress by going to your admin panel → Pages → Add new. Then, set the headline of the page and the permalink structure. You know, the basics of setting up any type of page.

If you use Thesis, you will see an additional box towards the bottom of the screen editor called SEO Details and Additional Style.

Expand that box and look for the input box towards the bottom that says CSS Class.

For the class name, enter the word landing. For each landing page you create, make sure you do this step and set the body class to landing.

That’s all you’ll need to do for this step. Go ahead and publish the page!

Step 2: Setting Up a Bare-Bones Landing Page in Thesis

For starters, you need to set up the basic template of the landing page (or, strip away all of the distractions from the default theme).

You need to remove the header, sidebar and footer. These elements, by default, have no business being on your landing page and will only distract visitors from the main content.

Now I know that sounds complicated, but by using some of the amazing filters packed into Thesis, it’s a cinch. All you have to do is paste this function into your custom_functions.php file:

function custom_remove_defaults($content) { return false; }

function landing_page() { if (is_page('78')) {
		add_filter('thesis_show_header', 'custom_remove_defaults');
		add_filter('thesis_show_sidebars', 'custom_remove_defaults');
		add_filter('thesis_show_footer', 'custom_remove_defaults');
} }
	add_action('template_redirect','landing_page');

To target a certain landing page, you will need to change the page ID to the ID of the page you just created. As this tutorial explains, you can find the page ID by:

…One method of page identification is to hover over the “edit” link in the WordPress > Pages section.

In most browsers, the status bar in the lower left will show a URL containing the id: http://YOURSITE.com/wp-admin/post.php?post=78&action=edit.

TIP: If you want to create multiple landing pages, you can use an array to target multiple pages. Just replace the first line in the landing_page function with this:

function landing_page() { if(is_page(array('78','79','80'))) {

…and change the page IDs accordingly.

Step 3: Adding a Logo + Simple Footer

The code above works great for stripping your theme, but it makes it seem a little too empty. Your site will be left without any branding, and it may confuse visitors and make them think that they left your site.

So, we are going to bring a piece of your header back: the logo. We do not want a navigation menu or any other elements from your header back — apart from the logo. This is done to keep readers on the page, and not have them go elsewhere on your site.

Paste this function under the one we created in the last step:

If you use the Full-Width Framework, use the following code:

function landing_header() { if(is_page('78')) { ?>
	<div id="header_area" class="full_width">
		<div class="page">
			<div id="header">
				<img src="LOGO IMAGE URL" alt="DESCRIPTIVE TEXT" title="DESCRIPTIVE TEXT" />
			</div>
		</div>
	</div>
<?php } }
	add_action('thesis_hook_before_html', 'landing_header');

If you use the Page Framework, use the following code:

function landing_header() { if(is_page('78')) { ?>
	<div id="header">
		<img src="LOGO IMAGE URL" alt="DESCRIPTIVE TEXT" title="DESCRIPTIVE TEXT" />
	</div>
<?php } }
	add_action('thesis_hook_before_html', 'landing_header');

All you need to do is change the page ID (use the same ID as the last step) and paste the URL to your logo in the tag.

Next is to create a simple footer. All you place in the footer is copyright information, and other legal documents. Again, keeping things simple.

If you use the Full-Width Framework, use the following code:

function landing_footer() { if(is_page('78')) { ?>
	<div id="footer_area" class="full_width">
		<div class="page">
			<div id="footer">
				<p>Copyright © 2011 My Awesome Site</p>
			</div>
		</div>
	</div>
<?php } }
	add_action('thesis_hook_after_html', 'landing_footer');

If you use the Page Framework, use the following code:

function landing_footer() { if(is_page('78')) { ?>
	<div id="footer">
		<p>Copyright © 2011 My Awesome Site</p>
	</div>
<?php } }
	add_action('thesis_hook_after_html', 'landing_footer');

Save and upload custom_functions.php.

4. Adding Some Quick CSS

Luckily, there is only a need for a tiny bit of CSS to put this page all together.

Paste the following into custom.css:

.landing #header { background-image: none; }

.landing .page { width: 65em; }

.landing #header, .landing .headline_area, .landing #footer { text-align: center; }

All this code does is resizes the content area so the page is smaller (for readability purposes) and aligns the text in the header, headline area and footer to the center.

It will also remove the background image from the header, so there is not a double logo.

Once you have gone through those 4 quick steps, you should have a more complete landing page system for your site.

Do you already have a nice landing page on your site? Or, have you just created something great by following this tutorial?

In the comments below, feel free to show off a landing page from your blog and tell us at least one thing you are trying to accomplish with it.