How to Create a Simple Landing Page in Thesis That Converts

by Alex Mangini · 78 comments

Landing Page Tutorial Thesis

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.

Since 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.

About the Author: Alex Mangini is the 18 year old founder of Kolakube. If you want to learn even more ways to boost your sites performance, you should check out his upcoming series called Beast Optimization.

If you enjoyed this article, enter your email below to get free updates!

{ 78 comments }

Derek Halpern

Big fan of landing pages, naturally. I’ve used them on Social Triggers for months now, and they always convert extremely well.

I use them mainly as content landing pages, though. Pages that link to a few different articles around a specific topic, and then an opt-in form. Like this for example:

http://socialtriggers.com/list-building

Alex Mangini

I always try to follow your examples from Social Triggers while creating landing pages of my own, they’re really well done I think. ;)

Tamal

Alex another great tutorial my friend, wonderful to have a complete resource, I love it. It will take me a while to consume all the detailed info and then applying.

Alex Mangini

Thanks Tamal!

Getting the layout down is the easy part — it’s writing the actual page that I think is the trickiest part of the whole thing.

Tamal

Yep man well said, writing the copy is the most tricky part since it’s involves marketing. This tut will come handy for me as in the upcoming few weeks I’m gonna need to build some “pages”

Bob Garrett

Hey Derek

Another great post and something that I have bugging my partner to setup.

Good stuff and keep crushing it !

Derek Halpern

Hey Bob, I didn’t write this one. My man Alex did. :-)

Alex Mangini

Thanks for the save, Derek. ;)

Bob, make sure you show us when you get the page setup! Really want to see some cool landing pages.

Brad Dalton

Excellent TUTE for all Thesis owners

Alex Mangini

Glad you think so! Do you plan on implementing a page like this onto your site?

Daniel Duclos

Nice tutorial, thanks. But there is one typo on the code. Where is

add_action(‘template_redirect’,’landing_page’);

Should be

add_action(‘template_redirect’,’landingpage’);

Of course, could be the other way around; where is

function landingpage() { if (ispage(’78′)) {

should be

function landing_page() { if (ispage(’78′)) {

;)

Cheers!

Alex Mangini

Good eye! Thanks for letting us know.

Derek Halpern

Sorry. There was an error. When Alex had submitted this post to me, for some reason, the .txt file was missing underscores in the code. Not sure why this happened, though I suspect it has something to do with Google Docs vs Microsoft Word files.

Avinash D'Souza

Nice tut Alex, thanks very much for putting this up! Wish you had added a demo page though….

Alex Mangini

Just try to imagine your site with only a logo, content column and basic footer all centered on the page with a slimmer page width.

…or check out one of Derek’s landing pages here.

William

Hiya guys i was wondering what plugin you use to get the social media icons on the left next to your post titles?

Becky

Hi Alex

I can’t get this code to work? I just keep getting ‘Fatal error: Call to undefined function ispage() in…’ even after trying the first cut and paste code and replacing the ’78′ with my own page id. What am I doing wrong?

Augusto

Hi Becky,
I suppose that it’s because it should be is_page() instead. Try to add the underline there.

Thanks Alex for the tutorial!
A>

Glen

There are a few more typos:
function customremovedefaults($content) { return false; }
should be:
function custom_remove_defaults($content) { return false; }

function landing_page() { if (ispage(’78′)) {
should be:
function landing_page() { if (is_page(’78′)) {

Peter Renton

Becky, See the comment by Daniel above and you probably have the answer. There was a typo.

Amy

Hi Alex,
I am also not able to get this to work. I get an HTTP 500 error when I use the code. I am replacing the ’78′ page id with my page number. Can you help?

Alex Mangini

Hey Amy, can you send me a link to the site? Or a screenshot of what’s happening.

And sorry about the errors, I used the code straight from my own sites but it looks like some things were changed around in the editing process. I let the editor know and hopefully the code will be fixed.

But if you follow the solutions Glen and Augusto posted, it should work until the post gets fixed.

Sorry about that.

Nick Dodd

Hey great tutorial on building a landing page Alex.

Gregg

Dumb question I’m sure, but where did the ’78′ come from in the function? I’m pretty much a rookie at this :)

Alex Mangini

Hey Gregg,

That number is the page ID and you will have to replace it with the ID of the page you want to use the template on. To find the ID, read this:

…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.

Rob

Nice post and very timely. Seems like I’ve been doing a lot of landing pages recently. This one (http://www.mulcahyslandscape.com/leaf-pick-up/) I created on a previously-designed site uses Jshortcodes to create buttons, boxes and columns. It’s not saved as a template though – which is what I’ll do with the instructions you laid out for us in this post.

Antonio

i just wasted 30mins trying to get this to work!

Neal

I can’t help but chime in on how difficult it is to communicate online. Personally, I appreciate those that take time to teach us things, pretty much for free.

I pondered Antonio’s comment

1. Only 30 minutes were wasted, when there was an expectation of way more – “just” meaning only – Antonio is excited that it only took 30 minutes instead of 50 minutes or days figuring out the whole thing on one’s own
2. 30 minutes were wasted fixing errors to get this to work – we are to assume that this is bad – infers anger over the typos – perhaps even though the time was wasted the result was desirable.
3. 30 minutes were wasted doing the tutorial and in general the result wasn’t worth it – the fact that this took 30 minutes was not worth the result – we are left to guess why – the issue wasn’t the typos in the original post – the issue is the outcome of the tutorial
4. the last thing Antonio did was waste 30 minutes and his comment is meant to tell us his status report – “just” meaning most recently – for example, I just finished typing “typing”.
5. “this” may or may not relate to the original post – it may refer to a comment – one might ask – get what to work?
6. Antonio may or may not be frustrated about the lost 30 minutes, we (probably only me) are left to wonder – is the “!” excitement?? anger??

Perhaps there are other interpretations . . .

All I know is that I just wasted 15 minutes doing this!

I wonder why I didn’t waste it doing something else?

Alex Mangini

What did you have trouble with?

Derek Halpern

Sorry Antonio. There was some strange error going on. When Alex submitted the article, there were some missing underscores. Still not sure why they were missing, but we’ve added them in now. I suspect it has something to do with the version of the document he sent and the program it was written on.

Rob @ Atlanta Real Estate

Man, I love this stuff, thank you.

Perth Web Designer Steve

Great simple guide! We’re just starting to use Thesis and this info will make it easier for our programmers to set up default page styles. Cheers Alex!

Mike Corso

Two things:

1) After trying to get this to work, the CSS section disappeared! (I had to remove the code from the custom_functions file b/c my site wasn’t showing up and I was getting an error message related to that file)

2) I have the Squeeze Page plugin from Unique Blog Designs; shouldn’t that be an easier way to do landing page (it isn’t easy–it’s a mess–just asking…maybe they improved it from a year ago).

Mike Corso
Cool Site of the Day
Boost Your Website Ranking
http://www.coolsiteoftheday.com

Derek Halpern

There was an unusual error in the code. When Alex had submitted this article via text file, for some reason, the text file dropped some underscores. Still not sure why this happened, but we’re working through fixing it.

Mike Corso

Derek,

How do I get the CSS Class section back? It’s just gone.

Mike

Derek Halpern

Under the post? In the SEO details? The CSS class section there is gone?

Mike Corso

Yeah–weirdest thing.

Mike

Mike Corso

Just checked the Squeeze page plugin–still useless.

Mike Corso
Cool Site of the Day
Boost Your Website Ranking
http://www.coolsiteoftheday.com

kiatlc

I tried your code and corrected some of the typo errors and now it works! Thanks!

But my center column is too wide! How can I narrow it down for easier readability?

Plz see http://www.weiyu.la/landing

Another question: What is the difference between Page Framework and Full Width Framework?

Martin Malden

Ah…

I wish I’d waited a bit before attempting this – those missing underscores played havoc with me too! :)

So I took a slightly different approach:

Instead of adding back the header and footer I didn’t remove them in the first place:

function custom_remove_defaults($content) {
return false;
}

function apply_custom_filters() {
if (is_page(’2022′)) {
add_filter(‘thesis_show_sidebars’, ‘custom_remove_defaults’);
}
}
add_action(‘template_redirect’,’apply_custom_filters’);

But I did need to remove the nav menu, which was part of my header:

function remove_nav() {
if (is_page(’2022′))
remove_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);
}

add_action(‘thesis_hook_before_html’,’remove_nav’);

I also needed to remove the Feature Box on this page, as it’s set to display site-wide:

function remove_feature() {
if (is_page(’2022′))
remove_action(‘thesis_hook_feature_box’,’my_feature_box’);
}

add_action(‘thesis_hook_before_html’,’remove_feature’);

Finally I needed to add a smaller header image because the content area is narrower without the sidebars…

A different header image (narrower):

function landing_page_header() {
if (is_page(’2022′)) {
?> <?php } }

add_action('thesis_hook_header','landing_page_header');

And remove the default header image just on the landing page:

function change_header() {
if (is_page('2022'))
remove_action('thesis_hook_header', 'my_header_image');
}

add_action('thesis_hook_before_html','change_header');

Took me a while to get there, but definitely worth the experience!

Cheers,

Martin.

Martin Malden

Sorry – just noticed WP removed the Img Src link in the different header image step above :(

Chris Aitken

Thanks Alex — very helpful tutorial and despite the typos in an earlier iteration of this, I really appreciate the time and expertise being shared here.

Cheers, Chris

kiatlc

anyone knows how to narrow down the content column of langding page without affecting other page?

Linas Matulis

That’s a brilliant question and I would love to get the answer, too.

Thanks, kiatlc!

Paul Cullen

Great post. Thanks. How do you get the “If you enjoyed this article, join others and get free email updates!” on the page? I’d like to stick it at the end of all my blog posts. Thanks, Paul.

Jeff

Alex,
Thanks for the timely tutorial! I love it! I have been following your tuts since your first blogussion blog. Great to see you making a name for yourself. You’ll see many of your tuts on my site. http://www.influenceology.com

Derek: you may recognize the ‘about’ page as well :).

I love thesis. With help from guys like you two. I don’t have to be an expert programmer/coder. I just have to understand how hooks work, cut and past and tweak!

Once again Thanks!!

Marelis

Hello there!
I’m a thesis user and I love reading this posts (that’s how I’m learning to set up my own blog).
But I don’t quite understand the idea of a landing page…
If I don’t sell anything on my blog, so can I still benefit from having a landing page? What for? Where would the link come from?
I’m a newbie at this and would really appreciate if anyone bothers to help me understand this better. I don’t want to waste ONE tip! :)
Thank you!
Marelis

Gregory Ciotti

Landing pages are also good for ‘content pages’ where you set up a page that goes over a broad topic, and also link to specific posts that you’ve written on that topic.

You can see these pages in action over on Copyblogger (although they use Premise to create them, obviously).

You can also see them in action on Derek’s blog SocialTriggers.

Marelis

Thanks, Gregory! I found a lot of useful information in Copyblogger. Got the whole idea now!
Thanks!

Max

Quick question – do those CSS classes work for folks? I added them into custom.css and didn’t see any changes. When inspecting with Firebug I see that those classes are not called. I also can’t see in the PHP where those classes are getting assigned to the page..

Linas Matulis

Not for me, Max.

Maybe you already found the way to align the header and the footer to the center?

Gregory Ciotti

Great post, I’ve mixed using custom landing pages on sites and sometimes I’ll use Premise (which to be quite honest, I was disappointed in, I though you’d be able to keep your site background and header intact, not have to start from scratch).

I also have an unrelated question for Alex or Derek, really simple/dumb but I can’t find it: bottom of post opt-ins, no idea how to set them up for Thesis, but you guys (and the Thesis blog) all have similar styling so I’m sure there is an easy way to do it.

Could you let me know what I need to copy/paste and where to put it if I want to create a bottom of post opt-in with my AWeber code?

Heather Cottrell

Great tutorial – thank you! I love learning new things about Thesis.

I have a few questions before I jump in and make one:
If I create a landing page as above with an opt-in for my newsletter, does it become the first page a visitor sees when they visit my site, regardless of what link got them there? How does the visitor get past the landing page if they do opt-in, and if they don’t? Will the visitor see this landing page again and again? Why would I create multiple landing pages – how would these be used?

Thanks!
Heather

Steve

Thanks for the tutorial. Had the same problem, but the fix worked. It wasn’t my experience that the CSS code actually made landing page smaller, though that would be really nice. How can I do this? – Steve

Juan

Hey!

Thanks for the tutorial!

I have a problem with the header, though…
It keeps sitting in the upper left corner of the screen…
I would like to move it to the center

What can I do?

Linas Matulis

Have the same problem – css code doesn’t align header nor footer to the center.

Any suggestions?

Camilo Rodriguez

Great tutorial, i´ve aplied that tutorial to make landing pages that are part of a series of emails for my suscribers.

Look the first one or them

http://www.vivesinpanico.com/equilibrio-como-una-vida-desequilibrada-puede-producir-ansiedad-generalizada-yo-ataques-de-panico

Thanks for this tutorial.

Awesome!

Nate

This was great, and was just what I needed! Thanks :)

However, I added a new landing page today using the array you mentioned. Now, all of my pages have an additional header area. I’m not sure why this is happening.

Any ideas?

http://www.tweetspeakenglish.com
http://www.tweetspeakenglish.com/sign-up-for-free-lessons-at-tweet-speak-english/ (landing URL).

Thanks!

Sean Davis

Thanks for this. I already had a landing page setup from pieces of code from all over the place. I was happy to put in the time and use all of this code that was created together. Here’s one of the pages I used this code on.

http://successonmymind.com/13reasons/

Plain and simple.

Linas Matulis

Looks neat and stylish, Sean!

Does it convert well?

Small notion:
I would suggest you simply delete “(at least I think so)” part of your copy – as it seems to weaken your self esteem and belief in the value of things that you have to offer.

Being humble is king. Being sorry in advance for a possibility to be wrong is not.

Besides that – love the layout and especialy the typography of “Why I Hate Your Blog”. Catchy, readable and sexy.

Keep up the good work! ;)

Linas Matulis

Hey,

tutorial looks very promising and following it I managed to strip down everything and add custom header logo and footer – kudos so far.

BUT.

Custom.css code does nothing to center-align: neither text nor header nor footer.

Any solutions? Thanks in advance!

Jack

Hmm bare bones landing page. Sounds like a challenge. Got to try and see if it works.

Paul

Hi,

The code worked great for me to build a “Start Here” page and improved conversions. I tried to build other landing pages by including the “array”, but I can’t seem to get the CSS to work on the second, third, … landing pages.

Here’s the code I’m using:

function custom_remove_defaults($content) { return false; }

function landing_page() { if(is_page(array(’2147′,’2394′))) {
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’);

function landing_header() { if(is_page(array(’2147′,’2394′))) { ?>

Copyright © 2011 Mud Run Maniac, All rights reserved. |
About Mud Run Maniac |
Sitemap

<?php } }
add_action('thesis_hook_after_html', 'landing_footer');

Robert

Hi Alex, Hi Derek-
Thanks for all the awesome tips and tricks! As a contractor who owns a tree service, I had no idea what Word Press was a year ago. But on the brink of losing our home and with baby girls counting on me, I pulled off an unlikely miracle when I taught myself Internet marketing. By springtime, we were crushing it on Google local searches! We made a bunch of money this year and have plenty in the bank to make it through our annual winter slow season. My question is: HTML, CSS, PHP, et al. – Is there a way to get up to speed without becoming a programmer? Any suggestions?

Trevor Watkinson

Hey Alex,

I just got done adding landing pages to my site using the method you described above. I modeled one of them after Derek’s landing page, altering the language to suit my brand.

All I can say is thanks for the amazing advice and that I look forward to seeing the difference this makes in my subscription rate.

Keep up the great work!

Heather Cottrell

Hey Alex, thanks for the tutorial. So helpful to always find a how-to when you need it.

However, it seems that my draft sales page looks exactly the same whether or not I indicate a css class. In other words, it seems like the first custom_functions.php code you gave (also in the Sales Squeeze tutorial) was all I needed. Nothing changes when I add the custom.css code. Nothing changes when I delete the css class from the page. What am I missing?

And one more question: has anyone figured out a way to create a sales page template that will actually show up in the template dropdown, rather than having to add a new page ID into this code every time you create a new sales page?

Thanks,
Heather

Ian

You can remove the specific page reference

i.e remove { if(is_page(’78′)) and the last }

This will apply it to all pages.. I am pretty sure you can then select an alternative template for pages you do not want to be a landing page.

chris

I’m getting this error:

Parse error: syntax error, unexpected ‘}’ in custom_php line 117.

And I can’t figure out where the problem is. Any help would be appreciated?

Mitchel

When I use the Feature Box, how can I remove this form the page? There’s no filter for that one, or am I wrong?

Randall

I can’t get the CSS to center my image in the header. Do you have any suggestions how to make the code you wrote work? Are there any changes that need to be made? It has no effect on the header image. I got everything else to work. But it will be no avail if I can’t get the image to center.
Anyway, thanks for your tutorial. It is the first one that I found that explains simply how to go this. Keep up the good work. And thanks for a great theme!

Denis

There is something that I am missing… All went ok with my landing, but my landing page is my Home Page, so, it´s say “Home”… How can I remove that and put another heading??

Thank you for this great tutorial, hope you can help me on this

Denis

Sorry, it was my fault… change the text in my “Home” page and now got a great title.
But I have another problem. My page is too wide. I change the width in the code in custom.css to 25em and nothing happened, so I returned to the 65em I´am using “Page Framework” with 1 colum… content width 620 and side bar width 295.
All my text is wide longer, nothing to do with Dereck´s Page in http://socialtriggers.com/list-building/…. and that is what I want.

Any suggestions??
Thanks and sorry for my bad english

Teo Coach

Would you tell me please…. If you cared to correct the code boxes at the top just not to have all revised and checked three time due to this _ underscore malfunction due to uncompatible applications…being google and microsoft?… That was long heh
Please answer just to save me time. cheers from Argentina.
Besides my mother tongue is spanish so it is double work for me understanding a foreign language.

Cheers and TX in advance.

Anne

Hey Alex and Derek,
Thanks for the tutorial, I was able to follow it no problem. But there are a couple issues that you don’t cover, some of which were asked by earlier commenters. Would love to have a follow up on:
1) Narrowing the body text area – in the above example it starts too far to the left.
2) Page title – how to change the styling of headers so they stand out from other pages.

But really, all the CSS for these design issues, plus the pain of going into the customfunctions file and updating the array in 3 different spots for each landing page you create, points to one basic flaw in the tutorial:

It would be way more convenient to have a landing page template.

Any chance of a how-to for that?

Thanks,
Anne

Anne Samoilov

Also a big fan of the landing pages – wondering how I’d keep the same layout as you’ve shown above, BUT keep the header/navigation intact. I’m all for making people go to a landing page and having them optin but I’d love it if they aren’t trapped on say my “about page”.

How would I use the above code but then KEEP the header/navigation?

Reggie Paquette

Like some others have said in the comments, changing the width of the landing page in custom.css isn’t working. Any suggestions? I would like it slimmer.

Thank you!

Eddie Gear

Hey Alex, does this hold good for Thesis child themes as well? Or does the tutorial change. I tried it on my site and it came out all messy. Can you shed some light on child themes and the landing page example here.

M Green

I want to try this but I’m scared. My site is live and I don’t want to screw it up.