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. 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

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

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!


71 thoughts on “Twenty Twelve – Three Column Layout Tutorial

    1. Göran Johansson

      Disregard my previus post.
      The problem was that misst to corretct:

      body.template-front-page .site-content,
      body.single-attachment .site-content,
      body.full-width .site-content {
      width: 100%;
      }
      to
      body.template-front-page .site-content,
      body.single-attachment .site-content,
      body.full-width .site-content {
      width: 50%;
      }

      If it’s a problem or not i dont know but the class code you prowide dosen’t work for me . I have change mytheme to ddtheme.
      Any ide?

      Reply
      1. Zeaks

        Post author

        Hi Göran, that bit of CSS you posted is for the full width template, homepage page template and attachment page. They do not display sidebars so the content should be 100% wide.

  1. Pingback:

    Öka bredden på en wordpressida i tema TwentyTwelve | Trotsig Frizon

  2. Fixer

    Hi there,

    thanks a lot for this great tutorial. I have a question:

    If I want to keep the site width 960px, would leaving out this piece of code in the style.css:

    
    /* 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;
    }
    

    and this pieces of code in the functions.php be enough:

    
    // 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 );
    

    Would this cause any unwanted side effects? Any reason why I shouldn’t be doing this?

    Thanks again!!

    Reply
    1. Zeaks

      Post author

      Hi Fixer, that should work fine for you. The CSS for the layout will use a percentage of whatever the width of the site is. If you notice any issues, let me know and I’ll take a look.

      I tend to use 1000px as a base because it’s easy for beginners to figure out how wide the sidebars and content are in case they need them bigger or smaller, for example, if I needed a 300px wide sidebar, that’s 30% of 1000px and it gives a bit more room for the second sidebar.

      Reply
  3. Richard

    Hi Zeaks,

    I’, currently using one of your other tutorials to display excerpts on the homepage of my blog and it is great.

    But I find that on wide screens twenty twelve leaves a lot of blank, wasted space at each side of the blog. Im not keen on overcrowding smaller screens tho (the standard layout looks good on my netbook or my old pc)

    So I was wondering if there was any way to implement this so that my blog uses three columns on wide screens and two columns on “normal” screens and mobile devices?

    Thanks very much for your help!

    Reply
    1. Zeaks

      Post author

      Hi Richard, using @media, you could tell the second sidebar to fall under the first sidebar. You would have to figure out at what point you wanted to show 2 columns and when to show 3. Here’s a rough example, don’t use this in your theme..

      In the post it says to use min-width 600px, maybe change that to 800px
      /* Left & Right Sidebars */

      @media screen and (min-width: 800px) { 
          .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%;
          }
      }

      Then for smaller screens such as 600px use this

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

      The second code uses the same CSS for both sidebars, to put them on the right, might need to clear the extra sidebar, I haven’t tried this, but it’s the basic idea.

      As for the whitespace, #page has padding around it, there doesn’t seem to be any left or right margins for content and the sidebar. You could use a negative margin for site-content to pull it to the left more. Easiest thing to do would be to view it in firebug.

      Reply
      1. Richard

        I think the penny has just dropped !!!

        Thanks for taking time to do the extra examples for me.

        I think I understand whts going on now. Hopefuly I’ll get time to try this out tomorrow.

  4. Shannan Powell

    Excellent tutorial. Worked great for a project I have been playing around with. Thank you!

    Reply
  5. Techsavver

    How to align with 5 widgets? I have 1204px as base size. Please tell code for 5 widgets.

    Reply
  6. Jungo

    I am currently working on my first theme. This tutorial has helped. Now I am wondering how can I split all three columns? Such as In your theme. Your sidebar and content area separated from one another…learning as I go.

    Reply
  7. Gil Connelly

    Wow, I wish my site looked that good. I am really new at WP. I have a child theme and followed your instructions as directed, but the additional widget areas don’t show up on the widgets page? What am I doing wrong? Help would really be appreciated

    Thanks

    Reply
    1. Zeaks

      Post author

      Hi Gil, open a forum post and use pastebin.com to show me the code you’ve added to functions.php and I’ll take a look.

      Reply
      1. Gil Connelly

        Hi, thanks for replying. I am the guy who put the new in newbie and I got rather frustrated trying to play with the code and the styling so I upgraded and bought the Twenty Plus Pro. It looks great so far but would like to make some additional changes but am at a loss as how to go about it and don’t want to mess up the format of the Twenty Plus Pro. I have it set up for the three column layout.

        Here is what I am looking to do,
        1. Footer, I would like to display our name address and phone number across the bottom and remove proudly powered by word press (mostly because it takes people away from my site) In theme options, general options, footer copywrite area, no matter how I enter the text (MKI CONSULTING, Address, Phone number) it shows up with no spacing and in the right hand corner of the page.
        2. Front Page Sidebar, I would like to add a Sidebar to the left side of the front/home page in addition to the 2 bottom widget areas. I have seen some posts on how to do this, but again, am deadly afraid of messing up your work in functions and have no idea how to do the styling.
        3. Adjust the with of the sidebar widget areas (with widgets in both left and right hand side it squeezes the main content area and makes it hard to read, also the padding between right hand column and main content area looks a little tight). I tried to change the values under left and right sidebars to 60% from 50% and 20% from 25% and they all ran together. I was able to go in and reverse those changes.
        4. I really like the block styling for the vertical menu on the right hand side of this site. I am not sure if “block styling” is what you call it, it is what I thought I saw when I used firebug to inspect the element on your site. Any ideas on how to make my custom menu look like that would be appreciated.
        5. And last, I have some shadowing around my header image. I added some custom css in edit css and it eliminates the box shadow in the images on my pages, but the shadow still appears on the header.

        Sorry for the long list, but I have searched everywhere- bing, google yahoo you tube and wordpress forums and can’t find the answers. Also concerned about adding/modifying code on20plus pro

        Thanks for any help you can provide

        Gil

  8. Mark Shirley

    Hi thanks great tutorial – does anyone know how to produce a page layout with responsive columns in a twentywelve theme.

    Reply
    1. Zeaks

      Post author

      Hi Mark, if your page template uses get_sidebar then it should display both sidebars and they should also be responsive.
      If you need a custom template, I would suggest making a copy of one of the current page templates and using that to create your page template.

      If you just want to use a regular page template with sidebars, it should work fine. If it’s not working for you, open a forum post and I’ll have a look at your code.

      Reply
  9. Matt James

    Hello-
    Thanks very much for this tutorial, it is very helpful. One question I have is how one would use this layout for the blog posts page (or a post category page) of the site but go back to the standard two column layout for other pages. Thanks!
    -Matt

    Reply

Leave a Reply

Please use the forums for questions that do not relate to this post.
Wrap all code in [code] Your Code Here [/code] tags.

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

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>