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!

180 thoughts on “Twenty Twelve – Three Column Layout Tutorial

  1. Maria

    Thanks for providing this tutorial! I have installed the theme and made the necessary modifications on 2 sites. One site works flawlessly, the other one has one big problem: On “pages” the left sidebar is displayed under the main column (posts works fine). The code is the same for the 2 blogs… I have re-controlled the code, I have even downloaded the theme again and added your modifications, uploaded it and activated it. Still, the column is below the main one. Any thoughts?

      1. Zeaks

        Hi Marie, I don’t see the sidebar under the content on any page of either site. What browser are you viewing it in? Could you take a screenshot, maybe open a forum post so I can help you easier too please.

  2. pix

    Hi I just implemented your code and the right column wont display any widgets. The new left column displays them perfectly. I am using a child of twenty twelve and this is the only modification ive made.

    1. Zeaks

      Hi Pix, check Appearance > Widgets and ake sure the widget areas are there. If they are add widgets to them, if it’s still not showing up then go over your code in case you missed something. If you can’t figure it out, open a forum post, link your site and use pastebin.com to show me your code.

  3. Wade

    Hi. Thanks for the tutorial. I have following problem:

    Fatal error: Cannot redeclare _verifyactivate_widget() (previously declared in C:xampphtdocswordpresswordpresswp-contentthemestwentytwelve-blank-childthemefunctions.php:5) in C:xampphtdocswordpresswordpresswp-contentthemestwentytwelvefunctions.php on line 485

  4. Chris Carman

    This is fantastic, thank you! The look is exactly what we’re looking for on our school district’s main landing page.

    However, is there any way to set up a page template that keeps your left sidebar widget but disables any other widget areas? Our district administration wants a list of links (sitemap) to appear in the left widget on all pages, but remove the slideshow widget on the right from all other pages.

    1. Zeaks

      You can do this but it will take a bit of work. You’ll need to add a conditional to the custom body class function, then add a conditional to the sidebar call. After that you’ll need to style the extra sidebar to float left.

      Add is_front_page conditional to the custom body class function like this

      if( ! is_page_template() && ( is_front_page() ) )

      Add a conditional to the sidebar.php like this

      <?php if ( is_front_page() && ( is_active_sidebar( 'sidebar-1' ) )) : ?>

      What you’ll be left with is the left sidebar showing on the right of all other pages, which is not what you want, so we need to create a new conditional body class function, then add left sidebar CSS using that body class. Hopefully this should do just that.

      UNTESTED:

      Add to functions.php, this will create a second conditional body class called left-body-class and will be used on all pages but the front page.

      // left sidebar body class
      function left_body_class( $classes ) {
      		  
      	 if( ! is_front_page() )
                $classes[] = 'left-body-class';
      		  
      	return $classes;
      }
      add_filter( 'body_class', 'left_body_class' );

      Then for CSS

      /* ===[ Left Sidebar Layout ]=== */
      @media screen and (min-width: 600px) { 
          .left-body-class .site-content { float: right; }
          .left-body-class .widget-area {
              float: left;
              clear: left;
          }
          .left-body-class #extra-sidebar {
              float: left;
              width: 26.0417%;
              margin: 1.71429rem 0 0;
          }
      }
      .ie .left-body-class .site-content { float: right; }
      .ie .left-body-class .widget-area {
          float: left;
          clear: left;
      }
      .ie .left-body-class #extra-sidebar {
          float: left;
          clear: left;
          width: 26.0417%;
          margin: 1.71429rem 0 0;
      }
  5. holger

    hi, i got a little problem with the 3-columns.
    i copied all your code, but the 3-colums only appear on the default template (page.php) and not on my custom template. i checked the code in my browser and mentioned the custom-layout style is only added to the default template and not to the custom template. do you have any idea?
    thanks holger

    1. Anna

      Great tutorial! Although I am having a similar problem to Holger’s – or at least I think I am. Post categories are getting squished in the the narrow center column (I made sidebars and center content area all the same width) even with full-width page selected – although the sidebars do disappear with the full-width template, the space they occupied remains. Full page template works fine for just normal pages (but not Post category or archive pages). I’ve spent 6 hours trying to figure out how to fix it. If you have a solution, I’d be very grateful!

  6. George

    I new to creating a website using WordPress and, as a newb, I really appreciate your tutorials. I am trying to follow your tutorial, but I am unable to install and activate style.css. I am receiving the following error: The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

    I have entered the following info in the file: Theme URI: http://xxx.xxx.xxx.xx/wp-content/themes/twentytwelve/twentytwelve-child/style.css

    Can you please tell me if there is something there that is preventing the installation/activation.

    Thank you.

  7. janus

    I did the left sidebar, mid-section and a right sidebar.
    But now I need a custom template that has a left sidebar and the content to the right. Can anyone give me a clue how to solve this?

  8. Shae

    Great Tut, I really appreciate it. I do have one request. The middle column is a little too small in the width. I have been playing with the CSS to make it wider but with no luck. Do you have any clue how I can increase the width of the middle content area? I am using a child theme of twentytwelve.. thanks

  9. Dane

    This tutorial helped me a great deal…THANK YOU! I am a complete beginner, but the only problem I have run into after following your tutorial is the image attachment page. When I click on an image from a gallery, it brings me to a page with the image enlarged but set off to the right. Here is the page: http://www.habitat-ajc.org/photos/129-2/dscn1777/

    If you could suggest a few options to either fix or circumvent this issue, I would greatly appreciate it.

    Thanks again!

    1. Zeaks

      I haven’t tested this but the section in functions.php where you added the child theme body class, try changing

      if( ! is_page_template() )
       if( ! is_page_template() || ! is_attachment() )

      Basically what it’s doing is, it’s adding the CSS for the body class to that attachment page template but the page template doesn’t include sidebars by default. What the above code change should do is exclude the attachment pages from using the custom body class and letting it display as it would by default.

      Another thing you could do is to copy attachment.php from twenty twelve to your child theme folder, open it and add the sidebar call to the bottom of the file

      <?php get_sidebar(); ?>

      This would add the sidebars and the CSS should place them properly on the attachment page.

      Let me know how it works out for you.

    1. Zeaks

      Hi Ahmet, Make sure you’ve followed the tutorial properly first. I took a look at your site and it looks like the CSS is there, and if you’ve added widgets to the left and right sidebar areas then you must of added the code to functions.php. All that’s left is the sidebar file. Check sidebar.php and make sure you’ve actually added the code to it.

Leave a Comment

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

*
*