Thesis Squeeze and Landing Pages

Thesis 1.8 has lots of great new features, but one of the less publicised ones is the range of filters that has been extended. These filters make it possible to customise even more of Thesis’ output without modifying core files.

Previously, squeeze pages or landing pages that varied significantly from the rest of your site’s layout might have needed a custom template, a whole new page template, or a bit of a fudge by hiding parts of the page with CSS. Now, it’s really easy to selectively remove the header, sidebars and footer.

Squeeze Page

To get the simplest squeeze page possible: no header, sidebars or footer. Paste the following PHP in custom_functions.php. This code is a modification of code found in the DIYthemes forum.

function custom_remove_defaults($content) {
        return false;
}
function apply_custom_filters() {
    if (is_page('Squeeze Page')) {
		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','apply_custom_filters');

The first function is the filter that returns “false” instead of returning the content that would normal be there (in the header, or footer, or sidebar). Read more about filters in the Thesis user manual.

The second function selects the page on which to apply the filter and then applies the filter to the header, sidebars and footer, just before Thesis loads on that page. Change “Squeeze Page” in if (is_page('Squeeze Page')) to the title of your squeeze page. If you want to filter multiple pages you can add their names as an array. E.g., if (is_page(array('Squeeze Page','Second Squeeze Page','Magical Landing Page'))).

Easily assign many squeeze pages

To more easily assign pages as squeeze pages, when you’re creating the page you can add a custom field to the page and have your custom function detect it. Change the code in custom_functions.php to the following.

function custom_remove_defaults($content) {
        return false;
}
function apply_custom_filters() {
	global $wp_query;
	$squeeze = get_post_meta($wp_query->post->ID, 'squeeze-page', true);
	if ($squeeze) {
		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','apply_custom_filters');

Then when creating or editing your squeeze page add a custom field with the name “squeeze-page” and any value (it doesn’t matter what the value is because we only use the name).

Using this set up, every page with this custom field will have the header, footer and sidebars removed.

These pages can be styled individually by using the page name body class, or styled together using a body class filter. See Using Custom CSS Classes for Posts and Pages and the body class filter in the landing page code below.

Landing pages with different sidebars

To present a different sidebar on squeeze or landing pages you could use the Widget Logic or Dynamic Widgets plugins to designate which pages widgets should be displayed on, but if you have many landing pages, or many widgets, that could be labour intensive. So, you can create a whole new sidebar that gets displayed according to the page name or custom field assignment, like the squeeze page filters above. Widgets in these sidebars will only be displayed on your landing pages.

The following code for a landing page — without header, original sidebars and footer and with new sidebars added — goes in custom_functions.php. Note: I’m using different variables and custom field names than in the code above, so pay attention if trying to mix and match the code.

Update 25^th October 2010: Added id parameter to register_sidebars() and changed IDs in thesis_default_widget() to avoid confusion with other registered widget areas with sequentially numbered IDs.
Update 3^rd November 2011: Edited the ‘name’ parameter in register_sidebars to fix disappearing widgets problem.

function custom_body_classes($classes) {
	$classes[] = "landing-page";
	return $classes;
}
function custom_remove_defaults($content) {
        return false;
}
register_sidebars(2,
    array(
        'name' => sprintf(__('Landing Page %d'), $i ),
        'id' => 'landing-page-$i',
        'before_widget' => '<li class="widget %2$s" id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);
function landing_page_sidebar() {
?>
</div> <!-- custom end #content -->
<div id="sidebars">
	<div id="sidebar_1" class="sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget('landing-page-1'); ?>
		</ul>
	</div>
	<div id="sidebar_2" class="sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget('landing-page-2'); ?>
		</ul>
	</div>
</div>
<div> <!-- balance out #content divs -->
<?php
}
function apply_custom_filters() {
	global $wp_query;
	$landing = get_post_meta($wp_query->post->ID, 'landing-page', true);
	if ($landing) {
		// remove unwanted sections
		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 custom body class
		add_filter('thesis_body_classes','custom_body_classes');
		// add new sidebars
		add_action('thesis_hook_after_content','landing_page_sidebar');
	}
}
add_action('template_redirect','apply_custom_filters');

This code does the following to pages with a custom field named “landing-page”.

• adds a body class of “landing-page”
• removes the header, sidebars, and footer
• registers 2 new sidebars called Landing Page 1 and Lading Page 2
• builds the code for the new sidebars (note that an extra </div> and <div> are added because there’s no hook in between the end of #content and the end of #content_box)
• then implements all of the above before Thesis loads

Editing the sidebars

If you only have one sidebar, you can remove the HTML for the second sidebar by deleting

	<div id="sidebar_2" class="sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget('landing-page-2'); ?>
		</ul>
	</div>

If you want a sidebar | content | sidebar arrangement, you’ll need different markup. Ask in the comments.

Landing page CSS

When you implement the above you will find that the new sidebars are below the content. This is because removing the original sidebars activates the No Sidebar template and makes the content full-width. To fix this we need to find out what the width of #content in your Thesis layout was. Use Firebug in Firefox or Webkit Inspector in Safari or Chrome to find that width by right clicking in the content area and selecting “Inspect Element”.

Then add the width back into custom.css.

.landing-page .no_sidebars #content {width:51.3em;}

Except for adding your content and styling the page, that’s about it. Content is added as per usual, by editing the page in the WordPress dashboard.