How to Set Up a Landing Page in Thesis

by Martin Malden

Thesis Theme for WordPress. Landing pages (or squeeze pages) have a specific purpose: to create a conversion.

Whether it’s to get a new subscriber or to close a sale, landing pages need to be free of any distractions that would give your reader an opportunity to leave the page without completing the conversion.

By default, the configuration of WordPress is the same on every page. Your header, sidebars and footer are faithfully reproduced each time but, on a landing page, these create distractions – so you need to get rid of them.

How to create a landing page

The easiest way to create a landing page is with a plugin. But given that plugins slow down your site, may clash with other plugins or your theme or cause problems when WordPress is upgraded, the better way (if you’re a Thesis user) is to make use of your custom functions and custom stylesheet files.

There is an excellent article in the DIYThemes site on creating a landing page – you can find it here.

The process set out there involves removing your header, sidebars and footer and then adding a new header and footer back.

Another way of approaching it, if you want to keep your existing header and footer, is not to remove them in the first place.

So set out below is an alternative process (and in all these examples be sure to substitute your own page ID’s and links for the ones I’ve used)

Before you start, though, you’re going to need the Page ID of the page you want to turn into a landing page. Here’s how to find it:

Go to the All Pages screen in your Admin area and hold your mouse over the ‘edit’ link of the page you want to convert to a landing page. The Page ID will be shown within the full URL at the bottom of the screen and look like this: ?post=2022.

OK, so having got your page ID, here’s the process:

Step 1 – Add a new body class

On the Add New/Edit screen of the page you want to convert to a landing page, scroll towards the bottom of the SEO Details and Additional Style module and, where it says ‘body class’, give it a name – e.g. landing.

Step 2 – Remove the sidebars

If you want different headers and footers from your normal ones on your landing page, follow the process in that article on DIYThemes.

If you want the same header and footer paste this code into your custom functions file:

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');

Step 3 – remove the navigation menu from your header

If your nav menu is an integral part of your header you’ll need to remove it.

You should keep a menu in your footer, which your visitors can see only if they’ve read to the bottom of the page, but retaining the menu in your header creates a distraction.

So to remove your nav menu from your header paste this code into your custom functions file:

function remove_nav() {
if (is_page('2022'))
remove_action('thesis_hook_after_header', 'thesis_nav_menu');
} 

add_action('thesis_hook_before_html','remove_nav');

Step 4 – remove your feature box (if you’re using it)

I’m using the Feature Box and it’s set to display site-wide, so I need to remove that as well. If you need to do that, paste this code into your custom functions file:

function remove_feature() {
if (is_page('2022'))
remove_action('thesis_hook_feature_box','my_feature_box');
} 

add_action('thesis_hook_before_html','remove_feature');

Note that the my_feature_box function (which I’m removing) is one I created a while ago and it generates the content of my Feature Box. The function you need to remove will probably be called something else.

Step 5 – Change your header image

Because your landing page will be narrower than your normal pages (the sidebars have been removed) you may need to use a narrower header image.

If so, create the image you want and upload it, then past this code into your custom functions file:

function landing_page_header() {
if (is_page('2022')) {
?> <img src="https://www.wealthydragon.com/blogbanners/landing-page-caahb-header.jpg" title="Internet Marketing Tips, WordPress Tips, Thesis tips from WealthyDragon" alt="Internet Marketing Tips, WordPress Tips and Thesis Tips from WealthyDragon" /> <?php } }

add_action('thesis_hook_header','landing_page_header');

You will also need to tell Thesis not to use your usual header image on your landing page – so add this code to your custom functions file:

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

add_action('thesis_hook_before_html','change_header');

Note that the my_header_image function is one I created earlier and it generates the header image and links.

Yours will probably be called something different, as long as you added your header image with the custom functions file. If you added it via your Header Image screen there will be nothing in your custom functions file to remove.

Step 6 – Set the width and style for your landing page

Finally you need to make use of that body class you entered into the SEO Details and Additional Style section earlier.

So go to your custom stylesheet and paste in the following code:

.landing #header { background-image: none; }
.landing .page { width: 65em; }
.landing #header, .landing .headline_area, .landing #footer { text-align: center; }

Using the .landing class you can style your new page as you like, and it will remain different from your other pages. The code above sets the page width at 65em and centres the text in the header and footer.

You can see the result of those code snippets here.

Remember to use your own style settings, links and page ID’s!

Health Warning

Very important: before you make any changes to your custom functions file download a copy to your machine. This is your backup copy in case something goes wrong and you get a Fatal Error.

Make sure you can access your custom functions file via FTP, so you can either upload your backup copy or delete the most recent bit of code you added in order to get rid of the Fatal Error.

Do not try making these changes if you don’t have FTP access to your custom functions file!

Let me know if you have any questions!

Cheers,

Martin Malden.

Please share this article - I'm counting on you!
       
Found this article useful? Get free updates!

Get regular updates, plus a free eBook on how to set up a business online - join us!

Your details are safe with me.
My Privacy Policy.

Previous post:

Next post: