How to use a different layout for a certain page?

Today I’ll show you how to setup your home / frontpage to use a 3 columns fixed layout and all other pages using a 2 colums, sidebar on the right fixed layout.

The major requirement for this and all other code snippets: You have to use a child theme!

We start with our style.css, responsible for the 2c-r-fixed layout. It should contain the following code:

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

Please make sure that you don’t import the original thematic/style.css.

Now we need to create your style-home.css. Copy style.css to style-home.css. Once the file is created you need to change the line responsible for the layout. Change it from 2c-r-fixed to 3c-fixed. Your style-home.css should now contain the following code:

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/3c-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

Now that we have defined two different layouts, we need to define where the different styles should be used. For this we edit the functions.php in your child theme’s directory and add the following code:

// filter thematic_create_stylesheet to implement your own stylesheets
function my_stylesheet($content) {
	// We test if we're on home or on your frontpage
  if (is_home() || is_front_page()) {
  	// yes, we are .. now let's load the 3c-fixed layout
		$content = "\t";
		$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
		$content .= get_bloginfo('stylesheet_directory') . "/style-home.css";
		$content .= "\" />";
		$content .= "\n\n";
  } else {
  	// we are not .. let's load the 2c-r-fixed layout
		$content = "\t";
		$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
		$content .= get_bloginfo('stylesheet_directory') . "/style.css";
		$content .= "\" />";
		$content .= "\n\n";
	}
		// $content will be handed back to thematic_create_stylesheet
    return $content;
}
// connect the filter to thematic_create_stylesheet
add_filter ('thematic_create_stylesheet', 'my_stylesheet');

That’s it. Now your blog is using two different layouts.

One last note about further modifications of your stylesheets. Modifications that are related to the 2c-r-fixed layout or the 3c-fixed layout need to be done either in style.css or style-home.css. Do not modify the original files in the Thematic directory. Modifications that are related to both layouts need to be done in style.css and in style-home.css.

You can modify the conditions in my_stylesheet() to your needs … more details about Conditional Tags.

Tested with Thematic 0.9 and a basic child theme.

Please use the ThemeShaper Forums for any further questions.