Creating A Squeeze Page With Thesis – Part Two

Complete the first part of this tutorial before doing this part.

So, in part one we built an efficient, customized Thesis template to house our squeeze page content. In part two, we’re gonna do it ninja style and completely customize the layout of our squeeze page. Ready? Let’s go!

Right now, we are here (if you didn’t read part one, now would be a great time to do it!):

squeeze

We are displaying the default header, nav menu, and footer. The only thing we’ve really changed at this point is the page content itself. We’ve removed the default content and sidebar areas, and we’ve inserted our squeeze page content. Now, you might want to stop right there. Depending on your situation, this might be the best solution for you. It all depends on your readers, your blog’s brand, and the default content of your header and footer. However, in most cases, it would be a good idea to customize things a bit more.

Stripping the Squeeze Page

Caution: This does get slightly more complicated and may require a small degree of creativity on your part. Just follow the instructions and we’ll all live to tell the tale!

To start, let’s get rid of all of the header, nav, and footer content on our squeeze page. In order to do that, we need to write three functions. Basically, we’re going to specify that the default header, nav menu and footer should appear everywhere but the squeeze page. Then, we’re going to replace the standard functions with our new functions using hooks. Here’s the code:

function squeeze_nav() {
	if (is_page('Squeeze')) {}
	else { thesis_nav_menu(); }
}
remove_action('thesis_hook_before_header', 'thesis_nav_menu'); // remove default nav menu
add_action('thesis_hook_before_header', 'squeeze_nav'); // replace with custom nav menu on squeeze page and default nav menu everywhere else

function squeeze_header() {
	if (is_page('Squeeze')) {}
	else { thesis_default_header(); }
}
remove_action('thesis_hook_header', 'thesis_default_header'); // remove default header
add_action('thesis_hook_header', 'squeeze_header'); // replace with custom header on squeeze page and default header everywhere else

function squeeze_footer() {
	if (is_page('Squeeze')) {}
	else { thesis_attribution(); }	
}
remove_action('thesis_hook_footer', 'thesis_attribution'); // remove default footer (including attribution)
add_action('thesis_hook_footer', 'squeeze_footer'); // replace with custom footer on squeeze page and default nav menu everywhere else

Just copy and paste that into custom_functions.php below the squeeze page code we’ve already inserted there. For now, we’ve designated that the header, nav, and footer are empty on the squeeze page. You should just end up with your squeeze content and a bunch of white space.

For the record, you can do this with CSS, but that method is not quite as effective, and it doesn’t allow us to replace the white space we’ve created with our own custom content. Thus, we’ll leave that out of this tutorial.

Adding Custom Content

Now, you may want to stop here. Again, depending on the content of your squeeze page, you might not want to add custom content to your header or footer. However, let’s assume you do.

The Header

First, let’s add a custom header image. In order to do this, we’ll just add the content into our “squeeze_header” function like so:

function squeeze_header() {
	if (is_page('Squeeze')) { ?>
		<div id="banner"><img src="[HEADER IMAGE URL]" alt="Don't Get Rickrolled!" /></div>
	<?php }
	else { thesis_default_header(); }
}

This just displays a header image where the default Thesis header used to reside. Obviously, you can insert any image you like here.

The Footer

Finally, let’s add some text to the footer. Again, all we’re doing is working with the function we’ve already created, and adding a bit of content for the squeeze page only.

function squeeze_footer() {
	if (is_page('Squeeze')) { ?>
		<div class="squeeze-footer"><p>If you don't sign up I will rickroll you...seriously...you think I'm playin?</p>
	<?php }
	else { thesis_attribution(); }	
}

Note: Threatening your readers may not be optimal…but its fun for demonstration purposes :)

The Styles

This one is pretty easy. We just add a couple lines of code to our custom.css file to ensure that everything is properly centered up:

.banner { text-align: center; }
.squeeze-footer { text-align: center; color: #cc0000; font-weight: bold; font-size: 1.3em; }

The Finished Product

If everything went according to plan, you should end up with something similar to this:

rickrolled

A Few Extra Goodies

Caution: This is complicated stuff! If this is too confusing, you might just want to stick with what we have done already.

You might be thinking, “Hey, you said you were going to include the nav menu and you didn’t!!!” Well, observant friend, you are correct. The reason is that I wanted to keep this relatively straightforward, and adding a custom nav menu with separate styles from the rest of your blog is not exactly for the feint of heart (or the coding impaired). Its not the most complicated thing you could ever do, but its complicated.

If you want to do this, here is a starting point:

<ul class="menu">
	<li class="tab"><a href="[HYPERLINK]">Link 1</a></li>
	<li class="tab"><a href="[HYPERLINK]">Link 2</a></li>
	<li class="tab"><a href="[HYPERLINK]">Link 3</a></li>
	<li class="tab"><a href="[HYPERLINK]">Link 4</a></li>
	<li class="tab"><a href="[HYPERLINK]">Link 5</a></li>
</ul>

That will create an exact replica of the Thesis default nav menu in terms of style, but it will contain your own links. In order to display this on the squeeze page, you need to place it in the function we wrote for our custom squeeze nav menu:

function squeeze_nav() {
	if (is_page('Squeeze')) { ?>
		<ul class="menu">
			<li class="tab"><a href="[HYPERLINK]">Link 1</a></li>
			<li class="tab"><a href="[HYPERLINK]">Link 2</a></li>
			<li class="tab"><a href="[HYPERLINK]">Link 3</a></li>
			<li class="tab"><a href="[HYPERLINK]">Link 4</a></li>
			<li class="tab"><a href="[HYPERLINK]">Link 5</a></li>
		</ul>
	<?php }
	else { thesis_nav_menu(); }
}
remove_action('thesis_hook_before_header', 'thesis_nav_menu'); // remove default nav menu
add_action('thesis_hook_before_header', 'squeeze_nav'); // replace with custom nav menu on squeeze page and default nav menu everywhere else

That seems pretty straightforward, but here is the tricky part. Let’s assume that you’ll want to create different nav menu styles (background, link, hover colors, etc.). In that case, you will need to designate specific nav menu CSS stylings just for your squeeze page. Luckily, Thesis makes this much easier. You still have to write all of the custom css, but we can easily set it to apply only to the squeeze page.

In order to do this, go back into your WordPress admin and edit the page we created at the beginning of this whole project. Scroll down to the “SEO Details and Additional Style” box for the page, and find “CSS Class.” In this box, enter “squeezepage”

This allows you to designate custom styles for just the squeeze page. You write them exactly as you would accept instead of “.custom” at the beginning of the css lines, you put “.squeezepage”

This will allow you to style the nav menu for just the squeeze page. For that matter, you could style anything you want for just the squeeze page. The level of sickness you can achieve here is really only limited by your imagination.

Note: We’re still only really touching the tip of the iceberg of the customization capabilities of Thesis…yep…its that awesome.

Finally, if you want to center the nav menu to match the rest of your squeeze page (assuming yours is centered like mine), that might be the trickiest part of all. I could probably write another 1,000 words on just that. Instead, I’ll refer you to a thread in Thesis forums. Godhammer has some pretty good ideas!

Get After It!!!

I don’t know about you, but I love being creative and blowing things out completely to see just how awesome I can make them. I guess you could say I’m driven by that. This is one of those projects where you really can do just about anything you want to. Let the creative juices flow and see what you can come up with!

Adam has a decade of experience as a WordPress designer and developer. Learn more about him here.

Written by

Adam has a decade of experience as a WordPress designer and developer. Learn more about him here.

«
»

Comments are closed.