Twenty Twelve – Three Column Layout Tutorial

Creating a three column layout with Twenty Twelve theme. Part one of a five part series on Modifying Twenty Twelve theme.

We’ll be editing 3 files to create out three column layout, functions.php, style.css and sidebar.php.
I’ll explain how to add a new widget area, add a new body class and how to style the new sidebar for 3 different style layouts. Left and Right sidebars, Two Left sidebars and Two right sidebars. Each layout will also contain styles for IE8 and the layouts will keep the responsive structure of Twenty Twelve theme.

I’ve updated the blank child themes to also include an empty functions.php file since it’s commonly used in child themes.

Start off by downloading the Free Blank Twenty Twelve Child Theme I’ve supplied (at the bottom of that page). Open the style.css and change the information at the top to whatever you like. Upload it to your website and activate it.

Next we’ll need a copy of Twenty Twelves sidebar.php file, so download that from your server, or download a new copy of Twenty Twelve from WordPress.org, upload it to your child theme.

Your child theme should now contain a style.css, functions.php, sidebar.php and screenshot.png.

Add a New Widget Area

First thing we’ll do is register a new widget area, this will be our second (left) sidebar. Open functions.php and add this to it

// Register extra sidebar
function mytheme_widgets_init() {
	register_sidebar( array(
		'name' => __( 'Extra Sidebar', 'tto' ),
		'id' => 'sidebar-4',
		'description' => __( 'The Left Sidebar. Displayed on all but full width and homepage template.', 'mytheme' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

Notice the sidebar uses the ID sidebar-4, this needs to be unique. Other widget areas in Twenty Twelve use the ID’s sidebar-1, sidebar-2, sidebar-3, last two are for the homepage template footer widgets.

Save and close functions.php

Add Sidebar to the template

If you check Appearance > Widgets you should see a new widget area, if you do then great, but it won’t actually display anything if we add a widget but go ahead and add a new widget it to it anyways.
I usually add the Calendar widget when working with widget areas as it’s the widest default widget and is great for picking up any issues with the sidebars.

Now open sidebar.php and under the current sidebar code add the following

<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
	<div id="extra-sidebar" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-4' ); ?>
	</div><!-- .extra-sidebar .widget-area -->
<?php endif; // end extra sidebar widget area ?>

This displays the new widget area. Any place that get_sidebar is used, will display the main sidebar and our new sidebar. Save and close sidebar.php and view your website.

You should see the new widget area (if you’ve added a widget) but it will probably display directly under the default sidebar.

Increase Twenty Twelve Site Width

Twenty Twelve was designed to display only one sidebar, the default width is 960px or 68.571428571rem, we’ll be increasing the width of Twenty Twelve theme to 1000px or 71.42857rem. To figure out what the rem value is simply divide the px number by 14. Thanks to VooDooPress for helping me understand this and more, take a look at their article on Modifying the Width of Twenty Twelve Theme.

Open functions.php and under the sidebar code we added earlier, add the following

// Override content width (for photo and video embeds)
$content_width = 500;

// Display 1000px width content if full width page template
function mytheme_content_width() {
	if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() ) {
		global $content_width;
		$content_width = 1000;
	}
}
add_action( 'template_redirect', 'mytheme_content_width', 11 );

This decreases the content width to 500px, and increases the full page content width to 1000px which will be our new widths with both sidebars displaying.

Since we’re changing the content width, we also need to add a new thumbnail size so our images are not stretched or squished to fit in the new content side. Add this to functions.php

// Change default thumbnail size
function mytheme_twentytwelve_setup() {
	set_post_thumbnail_size( 500, 9999 ); // (default featured images)Unlimited height, soft crop

}
add_action( 'after_setup_theme', 'mytheme_twentytwelve_setup', 11 );

This creates a new image size of 500px wide and unlimited height.

Tip An easy way to figure out the needed image size is after the sidebars are in place in FireFox, right click on the image and go to “View Image Info” it should say something like “651px × 406px (scaled to 500px × 312px)” The 500px width is the width we need to create a new image size for.

The last thing we need to add is a new body class. We’ll use this body class to target every page but the full width page template and the homepage template. Add this to functions.php

// Add child theme body class
function mytheme_body_class( $classes ) {
		  
	 if( ! is_page_template() )
          $classes[] = 'custom-layout';
		  
	return $classes;
}
add_filter( 'body_class', 'mytheme_body_class' );

This adds the body class .custom-layout to your theme. This saves us from reverse styling the full width template and the home page template of Twenty Twelve after we add our three column layout CSS.

If you look at the body class in FireBug you should see this.

twenty-twelve-body-class

Body Class UPDATE
Some users have had issues when using custom page templates and this body class function as it will not add the body class to any page template, so I’ve altered the function to specifically target everything else other than the front page template and full width page template. If you create a special page template of your own that you don’t want to display the sidebars on you’ll need to add it to this.

// Add child theme body class
function mytheme_body_class( $classes ) {
		  
	 if( !is_page_template( 'page-templates/front-page.php') && !is_page_template( 'page-templates/full-width.php' ) )
          $classes[] = 'custom-layout';
		  
	return $classes;
}
add_filter( 'body_class', 'mytheme_body_class' );

Save and close functions.php

Three Column Twenty Twelve Styles

Now that we have all of our functions and template changes complete, the next step is adding the CSS to display everything how we want.

I’ll explain something before we begin. Twenty Twelve theme uses a mobile first layout. This means that it was created to display properly on media devices (cell phones tablets) first, then by the use of @media conditionals it was made to display properly on desktop screens.
This is why for every layout you’ll see something similar to @media screen and (min-width: 600px). This tells the theme to use the CSS between these tags if the screensize is greater than 600px.

You’ll also notice the use of .ie This is a conditional class added to Twenty Twelve to specifically target Internet Explorer 7 and 8 because they don’t understand media queries (@media). It’s also why any .ie conditionals are not also used between @media screen and (min-width: 600px).

Open style.css of your child theme. The first thing we’ll do is change the site width to 1000px as mentioned above, so add this.

/* Increase theme width to 1000px */
@media screen and (min-width: 960px) { 
    .site {
        max-width: 1000px;
        max-width: 71.4285rem;
    }
}
.ie .site { max-width: 1000px; }

footer[role="contentinfo"] {
    max-width: 1000px;
    max-width: 71.4285rem;
}

Notice the .ie conditional, the regular code added between @media tags and the last part adjusts the footer area to reflect the new width.

Next part is the layouts. For this tutorial I’ll be using the left and right sidebar layout, I’ll also give the CSS to display a two left sidebar and two right sidebar layout, you can chose whichever one you want.

Add this to your style.css next

/* Left & Right Sidebars */
@media screen and (min-width: 600px) { 
    .custom-layout .site-content {
        width: 50%;
        margin-left: 25%;
    }
    .custom-layout .widget-area {
        position: relative;
        width: 20%;
    }
    .custom-layout #extra-sidebar {
        float: left;
        margin-left: -75%;
        width: 20%;
    }

}

Notice the .custom-layout body class that we created in functions.php is being used.

Now for the .ie conditionals, add this directly under it

/* IE8 and IE7 - Left and Right Sidebars */
.ie  .custom-layout .site-content {
    width: 50%;
    margin-left: 25%;
}
.ie .custom-layout .widget-area {
    float: right;
    width: 20%;
    position: relative;
}
.ie .custom-layout #extra-sidebar {
    float: left;
    margin-left: -75%;
    width: 20%;
}

The .ie conditional is basically the same, but it’s not added within the media queries. Sometimes a margin will need to be adjusted for Internet Explorer, sometimes it’s fine as is. Anyways, if you notice something looks out of place just in IE, you can use this conditional .ie to correct it.

Save and close style.css and refresh your website. You should see two sidebars, one on the left, one on the right. Resize your browser, both sidebars should drop below the content and display full width.

Check out the Homepage page Template, and Full Width page templates, they should look normal.

Here’s what your website should look like.

Twenty Twelve Three Column Layout

The last thing I recommend doing is once you’ve decided on a layout, run Ajax Rebuild Thumbnails plugin to create the new image sizes for all of your previously uploaded images. Run it once, then deactivate it.

As promised, here’s the code for the Two Left sidebars and Two Right sidebar layouts.

Two Left Sidebars

/* ===[ Two Left Sidebars ]=== */
@media screen and (min-width: 600px) { 
    .custom-layout .site-content {
        float: right;
        width: 49%;
    }
    .custom-layout .widget-area {
        width: 25%;
        float: left;
    }
    .custom-layout #extra-sidebar {
        word-wrap: break-word;
        width: 20%;
        float: left;
        margin-left: 2%;
    }
}
/* IE8 and IE7 - Two Left Sidebars */
.ie .custom-layout .site-content {
    float: right;
    width: 49%;
}
.ie .custom-layout .widget-area {
    width: 25%;
    float: left;
}
.ie .custom-layout #extra-sidebar {
    word-wrap: break-word;
    width: 20%;
    float: left;
    margin-left: 2%;
}

Two Right Sidebars

/* ===[ Two Right Sidebars ]=== */
@media screen and (min-width: 600px) { 
    .custom-layout .site-content {
        float: left;
        width: 49%;
    }
    .custom-layout .widget-area { width: 25%; }
    .custom-layout #extra-sidebar {
        margin-top: 1.8rem;
        word-wrap: break-word;
        width: 20%;
        float: right;
        margin-right: 2%;
    }
}
/* IE8 and IE7 - Two Right Sidebars */
.ie .custom-layout .site-content {
    float: left;
    width: 49%;
}
.ie .custom-layout .widget-area { width: 25%; }
.ie .custom-layout #extra-sidebar {
    margin-top: 1.8rem;
    word-wrap: break-word;
    width: 20%;
    float: right;
    margin-right: 2%;
}

You can replace the Left and Right sidebar layout CSS with either of these.

Check back soon for the next part of Modifying the Twenty Twelve theme where we’ll be adding three footer widgets to our theme.

Thanks for reading, let me know how your new layout turned out by leaving a comment!

168 thoughts on “Twenty Twelve – Three Column Layout Tutorial

  1. Pingback: TRUCS DE TINY FORGE | TESTS

  2. Tom

    Hi,
    Thanks very much for your tutorials. Unfortunately, despite following the tutorial to the letter (as far as I can tell) it doesn’t seem to have worked: I think it hasn’t put the right-hand column in but the text disappears off the edge of the screen and the left-hand widget is placed underneath the text in the middle of the screen. This only seems to be the case when viewing in desktop and not on a mobile, where the widget pops up underneath the text. Can you tell what I’ve done wrong? :(

    1. Zeaks

      Hi Tom, sorry I’ve been away for a couple weeks. Open a forum post and I’ll help you. You should link your edited files to pastebin.com so I can view them and add a link to your website so I can see the problem.

      1. Tom

        Hi, thanks for your reply. I tried creating a forum account but it’s not working – when I try to log in via facebook I get: “Zeaks Forums – Error New registrations are currently not being accepted.” and if I try to create an account it says it cannot find the username (like it’s trying to log me in instead of signing me up). My site is blackheathtranslations.co.uk and I have pasted the three separate codes in the following pastebin account: http://pastebin.com/u/blackheatht9ns . Thanks again!

  3. Pingback: Twenty Twelve – Three Column Layout Tutorial | Jimmy Knoll – Web Developer

  4. Dusan

    Hi, thanks for tutorial, almost works perfect for me :) I have only one issue:
    3 sidebar do not works on my homepage. (I have only right sidebar) Even I set homepage to be default template, not the front page template. Do you know what could cause this issue
    Thanks

  5. Pingback: Twenty Twelve – Three Column Layout Tutorial | Jimmy Knoll

    1. Zeaks

      If both sidebars are showing on the right side, you either didn’t copy the css correctly or used the two right sidebar layout near the bottom of the post or the width of your site was changed from the original.

  6. Mikael Boldt

    Thank you for a good tutorial.
    After some moving around in the style.css, the original sidebar is now on the left and the extra sidebar on the right.
    However, I have now some Pages in my system (tables) where I would like only to have the original sidebar and the entire page occupying the remaining part.
    I am trying to establish a page template. but I cannot get it to function. Do you have some ideas?

  7. Pingback: Various Site updates: Added third column with dynamic sidebar, and more | I'd Rather Be Writing

  8. Jennifer

    Hello, I think the new updates with the Twenty Twelve theme doesn’t seem to work with this anymore – the first code you place into functions.php crashes my entire wordpress dashboard and my website screen goes blank. Is there any way of updating this so it works?

    1. Zeaks

      Hi Jennifer , did you make sure to add an opening php tag at the top of the functions file?

      The top of your functions file should look like this

      <?php

      Also make sure you’re using a child theme as mentioned in the beginning of the post.

  9. Tatjana

    Thanks a lot for the tutorial.

    Can I use this on the Twenty Fifteen theme?

    Also, I’m getting a “syntax error” on these lines:

    ‘name’ => __( ‘Extra Sidebar’, ‘tto’ ),

    ‘description’ => __( ‘The Left Sidebar. Displayed on all but full width and homepage template.’, ‘mytheme’ ),

    Thanks for you help!

          1. Zeaks

            Thanks for pointing that out. Seems to be an issue with the syntax highlighter. I’ll fix this soon.

            *** I reverted back to my old highlighter plugin, the code should be okay now. Thanks again

    1. Zeaks

      Hi Henrik, it looks like you’re missing the .custom-layout body class. If you add it using Firebug or Chrome developer tools you’ll see the sidebars move into the correct positions.

      Make sure you’ve added this to your child theme functions.php

      // Add child theme body class
      function mytheme_body_class( $classes ) {
      		  
      	 if( ! is_page_template() )
                $classes[] = 'custom-layout';
      		  
      	return $classes;
      }
      add_filter( 'body_class', 'mytheme_body_class' );

      After adding that if it’s still not working check the body classes using Firebug it should show the custom-layout class like in this image http://i1.wp.com/zeaks.org/wp-content/uploads/2012/12/twenty-twelve-body-class.png

        1. Henrik Karmark

          __( ‘Extra Sidebar’, ‘tto’ ),
          ‘id’ => ‘sidebar-4′,
          ‘description’ => __( ‘The Left Sidebar. Displayed on all but full width and homepage template.’, ‘mytheme’ ),
          ‘before_widget’ => ”,
          ‘after_widget’ => “”,
          ‘before_title’ => ”,
          ‘after_title’ => ”,
          ) );
          }
          add_action( ‘widgets_init’, ‘mytheme_widgets_init’ );

          // Override content width (for photo and video embeds)
          $content_width = 500;

          // Display 1000px width content if full width page template
          function mytheme_content_width() {
          if ( is_page_template( ‘page-templates/full-width.php’ ) || is_attachment() ) {
          global $content_width;
          $content_width = 1000;
          }
          }
          add_action( ‘template_redirect’, ‘mytheme_content_width’, 11 );

          // Change default thumbnail size
          function mytheme_twentytwelve_setup() {
          set_post_thumbnail_size( 500, 9999 ); // (default featured images)Unlimited height, soft crop

          }
          add_action( ‘after_setup_theme’, ‘mytheme_twentytwelve_setup’, 11 );

          // Add child theme body class
          function mytheme_body_class( $classes ) {

          if( ! is_page_template() )
          $classes[] = ‘custom-layout';

          return $classes;
          }
          add_filter( ‘body_class’, ‘mytheme_body_class’ );

          1. Zeaks

            If you are using custom page templates you will need to remove the line

            if( ! is_page_template() )

            The function excludes the full width page template but also excludes any page template.

            I’ll take a look tomorrow and see if there is a more specific template tag I can use instead of is_page_template. Until then removing that line should fix your problem.

          2. Henrik Karmark

            Perfect it works – but i have a problem.

            When i delete the string – there are comming an empty widget are in the left side. Can you think of something that can help me :-)

            BR
            Henrik

  10. Zeaks

    Hi Henrik, I’ve adjusted the body class function to apply specifically to everything except for the full width page template and the front page template. So it should not cause issues with any of your custom page templates now.

    Remove the body class function and replace it with this

    // Add child theme body class
    function mytheme_body_class( $classes ) {
    		  
    	 if( !is_page_template( 'page-templates/front-page.php') && !is_page_template( 'page-templates/full-width.php' ) )
              $classes[] = 'custom-layout';
    		  
    	return $classes;
    }
    add_filter( 'body_class', 'mytheme_body_class' );

    If you have any other issues with this please open a forum post, it’s easier to keep track of the problems there, thanks!

  11. Martin

    Hello,

    The instructions have worked perfectly for me. But on second thoughts, I would have preferred to have the two sidebars on the right side while the content area on the left. I guess this is a matter of playing with css. I have tried changing the css as below but one of my sidebar is hanging below the content and the sidebar ie it cant get in between the content and the right sidebar

    /* Left & Right Sidebars */
    @media screen and (min-width: 600px) {
    .custom-layout .site-content {
    width: 50%;
    margin-left: 0;
    }
    .custom-layout .widget-area {
    position: relative;
    width: 20%;
    }
    .custom-layout #extra-sidebar {
    float: left;
    margin-left: 50%;
    width: 20%;
    }

    }

  12. Michael

    I got this working, thanks very much. My start page uses the Default Template and has got three columns. However, I have a similar problem to that of Mikael Boldt above (Oct 7, 2014). Were you able help him out, by the way? I need other pages with content on the left and one sidebar on the right. So far I have only been able to get content and sidebar to have widths of 30% and 50% respectively. Is there anyway of reversing this order without having to undo all the work already put in?

    1. Zeaks

      Hi Michael, you can use conditional body classes to target specific pages or templates to have a different layout for each page or just one page.

      If the homepage is the only page you want to look different then you would simple add the body class before each class for that layout, then use the one sidebar on right layout for the rest of your site the way you normally would and it won’t effect your homepage.

      If you link your site I can tell you the body class for your homepage template and give you an example of how to do it.

      1. Michael

        Thanks for the quick reply, Zeaks, it’s a relief to find out that the code can be easily modified. However, I’m new to WordPress and blogging in general, more familiar with designing static websites, so PHP/MySQL is still uncharted territory for me.
        I’m trying to figure out what you wrote and I’ll get back to you with a link to my site. It’s not up yet–I’ve been testing on my local server–so it might take a while.

  13. Michael

    Basically I’d like to have numerous layout templates: page with three columns (content in the middle – homepage), two columns (sidebar left), two columns (sidebar right), and full width (no sidebar). I need a table-like structure in another page and, feeling helpless, I already resorted to using a plugin for it (Page Builder). I’d like to keep the changed width, too (1000px).
    After reading (as usual for hours) about page templates, conditional tags, and body classes, it’s still beyond me how to implement (sigh).
    In your original code you add a child theme body class, so I guess the if statements would go in there, in functions.php? Or do I add the body class function to the body tag (header.php, template page?) and then specifically style individual pages. I can follow instructions if they are clear but I can’t invent, not yet at least.
    Here’s the link: http://http://tallon.de/blog/

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*