Creating A Squeeze Page With Thesis – Part One

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:

squeeze

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

Continue on to part two of the Thesis Squeeze Page Tutorial

Make More Money From Your Blog

Insider Updates

Learn how to make more money with actionable no-nonsense marketing tips. Sign-up below and immediately receive our 5 part blog marketing crash course.

Written by

(photo by Roger Smith)

Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. He writes web design tutorials and resources on Theme Big. Check out his custom work here.

Adam has written 16 posts for Art of Blog!

{ 16 comments… read them below or add one }

Chris February 22, 2010

Adam:

Appreciate the tutorial. When I install the two lines of “custom.css” code, everything is spaced properly, but the entire blog shifts to the right instead of remaining centered. Any suggestions?

Thanks,

Chris

Reply

Nick Reese February 22, 2010

Just at first glance, could the name of the page you created be called “aweber”? If so Thesis is adding a class to the body making it float to the right.

Try renaming it to something else.

Reply

Adam Baird February 22, 2010

Had no idea Thesis did that. Learn something new every day.

Reply

Chris February 22, 2010

The aweber line seems to be fine; it’s the squeeze line that throws it off somehow.

Reply

Nick Reese February 23, 2010

What is the name of your page?

Reply

Lain March 18, 2010

Cut and pasted and followed along… and ended up crashing my whole site with this:
Warning: Cannot modify header information – headers already sent by (output started at …etc.

What did I do wrong?

Reply

Nick Reese March 18, 2010

Nothing I know of should be resending the headers. If you want email me your custom_functions.php along with the error and I’ll take a look.

Reply

Adam Baird March 18, 2010

Tough to say without knowing what other code on your site might conflict. If you copied and pasted exactly you shouldn’t have any problems.

Reply

Dee May 15, 2010

Is there a missing ‘div’ in the code? The video tutorial shows an opening div for the video that’s being added to the squeeze page, but the printed code does not. Am I missing something?

Reply

Louis June 15, 2010

Hi adam

i build a squeeze page with your code

see the result – http://www.1kdayformula.com

but the autoresponder code look not the same on explorer or firefox

do you have a idea???

Reply

geraia August 26, 2010

the registration form is not showing when i copied and pasted the codes in my blog?? any idea?

Reply

Mahindra August 27, 2010

Hi Adam,

Thanks for this tutorial.
I did exactly as you instructed and copied and pasted everything as it is. Created a page called Squeeze, selected custom template etc.

But for some reason, the page loads only the header. The body, content and everything else doens’t appear. Here’s the link if you have a bit of time to check this out and offer solutions:
http://www.experienceserenity.com/squeeze

Thanks again..

Peace

Reply

John February 6, 2011

I’m going to make a guess that the page created was ‘labeled something other than ‘Squeeze’. That’s why nothing showed. The newly created page must be named ‘Squeeze’.

Reply

Sire August 27, 2010

You would think that by now they would have this all built in. Thankfully the theme I’m using has and all I have to do is edit it to suit my needs.

Reply

Jack November 23, 2010

So What theme do you use, Sire?

Reply

Marvin January 27, 2011

Great information! Thanks, its a big help for a starter like me. I am trying to learn as much as I can. I actually am using Optimise Press right now, what do you think about it? Need an experts opinion. thanks!

Reply

Leave a Comment

{ 2 trackbacks }