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!

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Adam Baird

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.

Comments

  • Chris M says:

    I followed the above steps and everything worked fine except with the custom header on the squeeze page.

    The problem appears to be because I have my_banner.png set as the header background with the site name and site tagline disabled in the header.

    On my squeeze page this header background is showing. How do I disable the header background on just my squeeze page?

    • Adam Baird says:

      Chris,

      The best way to do that would be to add a separate css selector (in page options) to your squeeze page. Then you can specify the header element background as whatever you want using your custom css class.

  • Joe Adkins says:

    Great tutorial…it really helped me out as I’m new to thesis. This is the only tutorial that I could follow that worked #1. and #2 actually taught be how hooks work. Thanks!

  • Mike says:

    I’m having a problem inserting a header. http://hackmycredit.com/squeeze/ this is what it looks like. Does anyone else have this problem? If so, did you figure out how to fix it?

    • Hector says:

      Hey mike, put this in your custom css file.
      you just need some padding in the bottom of your header image.
      I suck at css but im sure this will fix your problem. let me know if it worked out.

      .squeeze #header {
      background:url(“http://mikegthompson.powweb.com/hackmycredit/wp-content/themes/thesis_17/custom/images/test.jpg”) no-repeat scroll 0 0 transparent;
      border-bottom:medium none;
      padding-bottom:130px;
      text-indent:-9999px;

  • Hector says:

    Great tutorial! I was using a custom html page to do my squeeze pages, im glad to know i can do it all from my thesis theme. Im im love with it more every day. :)

  • […] Creating A Squeeze Page With Thesis – Part One – Part Two […]

  • Matt says:

    Great … this works and I like, so thanks very very much.

    I’ve removed the nav completely from the squeeze page, and added an option further down to skip sign in and access the main site directly.

    BUT … clicking the header logo anywhere else on the site takes you back to the squeeze page because it’s set as “home” in the wordpress options. I’d rather send people back to my non-squeeze main blog page.

    any way around this?

    Thanks a lot in advance …

  • cool, thanks for this. I’d been using static HTML files before now but this makes it a lot easier to work inside WP for everything.

    I found WP still messing around with my page layout though inserting paragraphs here and there which is damned annoying. had to use a plugin to stop it from doing that and works fine now.

    Phil

  • drt says:

    Thanks for the nice tutorials. It makes sense and I got the idea on how to use it for my application. In addition, it’s very easy to follow. However, I still have one question.

    I am working on a landing page for an affiliate program, and it requires me to put a snippet of javascriptcode before the html tag. Thus it will be located even before the <DOCTYPE! line.

    I have read the suggestion in Thesis Forum, but I just wonder, if placing the script using at thesis_hook_before_header will work or thesis_hook_before_header is actually inside the html tag?

    Thanks you very much.

  • Marvin says:

    Great tutorial..Helped me a lot since I am a newbie.

  • Great stuff and code for users like me who want to benefit from experience.

    Thanks