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.

This entry was posted in Layout and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

6 Comments

  1. Posted February 7, 2010 at 10:36 pm | Permalink

    Interesting; I managed to do it while importing the original Thematic CSS by finagling with margins to push the secondary div to where the left column would be and using display:none on posts and pages.

  2. Posted June 24, 2010 at 3:26 pm | Permalink

    Thanks alot for this. Will have to give it a go on my site. Should help with pemalinks and SEO if I dont have HTMl pages linked to my blog which is what I have currently.

    Does this technique work only with the front page being different. What would change in the function code to have more than one page effected by the first style sheet?

    I.E

    Pages 1 -5 style sheet 1
    Pages 6 -10 style sheet 2

    Thanks for the article

  3. Posted March 13, 2011 at 4:23 pm | Permalink

    This is perfect! Exactly what I was looking for. In case anyone else is trying to do the same, I needed to have a different layout for home page as well as adding an extra large image to the home page. I used your example exactly plus an extra conditional statement in my functions.php to add an extra to thematic header to get the desired effect.

    // Function to add HomeImage below #Access div
    function Add_Home_Image(){
    // We test if we're on home or on your frontpage
    if (is_home() || is_front_page()) {?>

    <?php
    }
    }
    add_action('thematic_header','Add_Home_Image', 10);

    (I even cut and pasted your conditional into my simple function :)

  4. John Kerns
    Posted June 16, 2011 at 3:16 am | Permalink

    Thanks for the instructions; they worked perfectly. Incidentally, you could more-or-less cut my_stylesheet() to half it’s length by omitting the else clause, since all it does it set $content to the same value it already has.

  5. Greg Turner
    Posted June 17, 2011 at 5:54 am | Permalink

    I wanted to be able to have the user be able to define a layout on a per page basis. To do that, I added a custom field that is set in the admin edit page, and the value of this custom field tells what layout should be used,

    I copied the thematic style.css file as the main style sheet for my child theme and took out the reference to the style sheet for the layout.

    Then I created a function in the functions.php and hooked it into the wp_head action hook. In that function, I get the value of the custom field, and output a reference to the correct layout style sheet from thematic.

    Comments on this method?? Any better way to do it? Thanks

  6. nicobr22
    Posted June 24, 2011 at 4:32 pm | Permalink

    Hi,

    Thanks, I was looking for this.

    Also, I found another way to do this. With this you don’t need to create two .css files, and don’t need the @import code on the .css file neither. Just paste the following code in the functions.php file:


    function childtheme_create_stylesheet() {
    $templatedir = get_bloginfo('template_directory');
    $stylesheetdir = get_bloginfo('stylesheet_directory');
    if (is_home() || is_front_page()) {
    ?>
    <link rel="stylesheet" type="text/css" href="/library/styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="/library/styles/typography.css" />
    <link rel="stylesheet" type="text/css" href="/library/styles/images.css" />
    <link rel="stylesheet" type="text/css" href="/library/layouts/3c-fixed.css" />
    <link rel="stylesheet" type="text/css" href="/library/styles/default.css" />
    <link rel="stylesheet" type="text/css" href="/library/styles/plugins.css" />

    <link rel="stylesheet" type="text/css" href="/library/styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="/library/styles/typography.css" />
    <link rel="stylesheet" type="text/css" href="/library/styles/images.css" />
    <link rel="stylesheet" type="text/css" href="/library/layouts/2c-r-fixed.css" />
    <link rel="stylesheet" type="text/css" href="/library/styles/default.css" />
    <link rel="stylesheet" type="text/css" href="/library/styles/plugins.css" />

    <?php
    }
    }
    add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

More in Layout (3 of 2 articles)