Creating A Squeeze Page With Thesis – Part One

Spread it!

Share

Email This

Regardless of the business you’re in, whether its blogging or selling hot dogs on the corner, you can and should build an email list of your readers (or hot dog eaters as the case may be).  The single best way to do this is to use a squeeze page.

What is a Squeeze Page?

Defined, a squeeze page is simply a single page of your blog with the sole purpose of collecting contact information (typically first name and email) from your readers. That’s the short answer.

The long answer is that a squeeze page is a simple example of the law of reciprocity. What’s that? The law of reciprocity (loosely translated) says that if someone gives you something, you’ll be more likely to give something back. Normally, you give the reader extra content in the form of a newsletter or some sort of freebie such as an e-book detailing one aspect of your niche, and the reader gives you his or her name and email address in return. Pretty simple stuff right?

How Can I Make A Squeeze Page?

I could write a book on creating an effective, high-conversion-rate squeeze page, but that’s a whole article of a different color. For now, let’s just focus on building a simple squeeze page using a Thesis custom template.

I should mention that this is a two part article. In this first part, I’m just going to give you the basics. We’ll do the custom template thing (not as complicated as it sounds!) and put some content in there. In part two, I’ll venture far into Thesis ninja-dom and show you how to create a completely unique squeeze page with headers, nav menus, and footers (feet?) that are completely different from the rest of your blog.

Getting Started

You can put absolutely anything you like on your squeeze page. You are only limited by your imagination. However, for the sake of the sanity of the coding impaired, I’m going to keep it as simple as possible for this project. I’m just going to place a simple video and an email subscription form from AWeber.

The first thing you need to do is add a new, blank page to your blog. You should title it “Squeeze” and be sure to set the page template to “Custom.”

Got that done? Good…let’s take a look at the code for this project. If it looks intimidating don’t worry, I’ll walk you through it. From here, we just need to create a function to house our squeeze page content, and then we need to use Thesis hooks to place that content in our custom template for the squeeze page.

Note: the Thesis custom template can house multiple templates for multiple pages and/or groups of pages. We’re just creating a template for one page. For a more detailed explanation, I’ll let Berchman explain.

function squeeze_template() {
	if(is_page('Squeeze')) {
		?>
		<div class="squeeze">
			<div class="aweber">
				<script type="text/javascript" src="http://forms.aweber.com/form/01/1957545901.js"></script>
			</div><object width="600" height="350"><param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="350"></embed></object>
			</div>
		</div>
		<?php
	}
}
 
// ENABLE CUSTOM SQUEEZE PAGE TEMPLATE
remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample'); // removes sample custom page template
add_action('thesis_hook_custom_template', 'squeeze_template'); // inserts custom page template for our squeeze page<

Setting The Parameters

function squeeze_template() {
	if(is_page('Squeeze')) {

This part is pretty simple. All we’re doing here is naming our template. We’re also designating that our template will be used on the squeeze page and only on the squeeze page.

The Squeeze Page Content

<div class="squeeze">
	<div class="aweber">
		<script type="text/javascript" src="http://forms.aweber.com/form/01/1957545901.js"></script>
	</div><object width="600" height="350"><param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="350"></embed></object>
	</div>
</div>

This is also pretty straightforward. Basically, we’re just inserting the video and our registration form. Should be pretty self explanatory. That’s it for the main components of the function.

Playing Hooky

Now that we have our function done, we need to place it in our custom page template. That way, when we create a page named “Squeeze” and set its template as “Custom” (we’ve already done both), our template with its content will appear. We’ll use the “thesis_hook_custom_template” to accomplish this. First, we remove the default sample template that ships with Thesis. Then we replace it with the function we’ve just created. Here’s the code:

remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample'); // removes sample custom page template
add_action('thesis_hook_custom_template', 'squeeze_template'); // inserts custom page template for our squeeze page

Myles of Style

Finally, we need to insert some CSS in order to line up our elements and get them centered properly. Obviously, this will differ a great deal depending on your video and registration form (or any other content you add), but here’s a basic starting point.

.squeeze { margin: 1.5em auto; width: 900px; }
.aweber { float: right; width: 250px; }

The Finished Product

When you’re done, it should look a little something like this:

That’s it for the first part of this tutorial. In part two, we’ll create a completely different design for your squeeze page.

Tagged as: squeeze page, Thesis, wordpress

Article by Adam Baird

Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. Check out his personal blog or follow him on Twitter for more Thesis tips.

Adam has written 7 awesome articles for Art of Blog.