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

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!

147 thoughts on “Twenty Twelve – Three Column Layout Tutorial

  1. Joe

    Works like a charm. Haven’t gone live with it yet as I am still testing on development server.
    I have been wanting to work with a child theme of twenty twelve as I am keen to add a bbPress to my website but needed this extra sidebar and a few other additions.
    Your explanations are very clear and complete, and easy to follow!
    Thanks again.

  2. Andrea Reed

    After following the first step and adding the code to functions.php, I received this error and could not proceed.

    Fatal error: Cannot redeclare twentytwelve_setup() (previously declared in /homepages/11/d364271349/htdocs/allconnected/the-paper-ranch/wp-content/themes/the-paper-ranch/functions.php:52) in /homepages/11/d364271349/htdocs/allconnected/the-paper-ranch/wp-content/themes/twentytwelve/functions.php on line 77

    Can you help me? What did I do wrong?

    Thanks!

    1. Zeaks

      I don’t have an IPhone, but it looks the same on my android as it always did. The thing about the @media CSS is that it only affects the layout on screen sizes greater than 600px, @media screen and (min-width: 600px). (or whatever width we use)
      Since all of our CSS in within the @media tags, the original mobile layout was not touched at all.
      If you link your site or test site I’ll take a look at it on my mobile. You can also check your site here for different mobile sizes http://zeaks.org/mobile/

  3. Iurie

    Zeaks, thank you for your tutorial!

    Can you sugest how to add the left sidebar without to decreas the content width to 500px? I want to add to the original width of the Twenty Twelve the width of the new sidebar.

    Thanks.

    1. Zeaks

      Hi Lurie, the CSS for the layout should still work since it uses percentages. You’ll have to leave out this bit of 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;
      }

      You’ll also need to adjust the content width in functions to set your new image size and also set the new thumbnail size that we added to functions. Easiest thing to do would be to leave those content width functions and the new image size out until last. Once you have the CSS and everything else working, add a featured image, then right click in Firefox > view image info to see what the image is scaled to, then set the content width to the width Firefox says it’s been scaled to.

  4. Verygoodfood.Dk

    Hey! This is kind of off topic but I need some help from an established blog.

    Is it very hard to set up your own blog? I’m not

    very techincal but I can figure things out pretty fast. I’m thinking about
    setting up my own but

    I’m not sure where to start. Do you have any tips or suggestions? Cheers

  5. Des Walsh

    Finally got it almost right. Didn’t pick up on getting the empty functions.php, so had to backtrack a bit.

    One problem. The content in the left sidebar is duplicated at the foot of the page. I had the calendar widget there first and the calendar was duplicated. I changed that for the search widget and then that was duplicated.

    I thought I had followed the steps very carefully this time.

    Test site is http://blogfromthebeach.com

    1. Zeaks

      I’d have to take a look at your code, but it sounds like the widget area IDs may be mixed up. Backtrack your code making sure all of the “sidebar-4″ (example) IDs are unique for each widget area. Also keep in mind that Twenty Twelve comes with 2 homepage footer widget areas and the normal sidebar has it’s own ID, so yours should start at no lower than sidebar-4

  6. Brian

    Hi,

    I’d like to givemyself some more room in the sidebars. When I tinker with the code below the sidbars don’t want to work correctly. What I’m after is 250 px sidebars left and right and a 500 pixel content area. If you get a chance could you please give me a hint. Thanks again for the GREAT blog post!

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

    Thanks again,
    Brian

    1. Zeaks

      Since the site width is 1000px, and you want a 250px sidebar, then the percentage for the sidebars would be 25%. You’ll have to allow for margins to adjust the content width. I would start off with 25% for each sidebar width, then try 40% for the content, that would leave roughly 4 , 5% margins between the 3 areas.

      1. bigwavemaui

        Hi again,

        I bought your pro version and was having problems with internet explorer 9 so I decided to reinstall twenty-twelve and the tutorial + the child theme to get 3 sidebars ( minimum requirement) and test from there.

        Wow, maybe it’s not me but it’s crazy. On one of my windows 7 machines with a 1680×1050 display ie 9 shows a green background for this page:
        http://www.maui-tropica.com/maui-nui/
        On my other windows 7 machine , ie9 at 1920×1080 the whole screen is filled with green–no blog page but firefox and chrome on this machine display correctly–any ideas? The only thing I put into css is:

         /*  484  */
        body {
        	font-size: 14px;
        	font-size: 1rem;
        	font-family: Helvetica, Arial, sans-serif;
        	text-rendering: optimizeLegibility;
        	color: #333;
        	background-color: #55D655;
        }
        

        Thanks,
        Brian

    1. Ross Gosling

      I have followed your instructions and it the child theme looks as it should.

      However when I change the name of the child theme folder from ‘twentytwelve-blank-childtheme’ to ‘myfoldername’ the themes sidebar disappears and the theme looks different. Do you know how I can fix this?

      Thanks

  7. Pingback: Twenty Twelve Footer Widgets | Zeaks Blog

  8. Sasan

    Hi, Thank you very much sir.
    i use your “twenty eleven layouts”. won’t you make a 3-column layout with the same features as of “twenty eleven layouts”? i know your are doing the same thing gradually but, if you make a theme just like that, it would be great.
    also, do the above codes work out in your “twenty twelve Dark” theme?
    Thank You,

    1. Zeaks

      Hi Sason. Twenty Eleven layouts was based on the Twenty Eleven theme. the problem with adding features to Twenty Twelve like the layout chooser is that twenty twelve does not have a Theme Options panel.

      It’s possible to add the Twenty Eleven theme options to Twenty Twelve, but a bit complicated, it’s what I did with Twenty Plus Pro http://zeaks.org/child-themes/twenty-plus-pro-twenty-twelve-child-theme/ but I won’t be creating a tutorial on how to do it.

      If you download the free Twenty plus Lite http://zeaks.org/general/twenty-plus-lite-twenty-twelve-child-theme/ and take a look at the code, you might be able to figure out how to add new layouts.

      These edits should work fine with the dark color scheme, the color scheme simply changes colors, I don’t recall there being any layout changes at all.

  9. Eric Reynolds

    Zeaks, thank you so much for the wonderful tutorial. It works well for another project that I am working on using the Twenty Twelve theme. However, I only want to display the three-column layout on the home page and use the Default Template’s two-column layout for all of my other pages. I use a plugin that displays events using the Default template and my events do not display properly using the three-column layout.

    Can you help me out? I am hoping that a simple change to my child theme’s functions.php will be the solution.

    Thank you,

    Eric

    1. Zeaks

      Hi Eric, I’d need to know how the events are not displaying properly (this would be better asked in the forums) As for only displaying the 3 column layout on the homepage, you can do that by using conditional CSS and the .home bodyclass. Search this site and the old/new forums for conditional CSS, there are many examples.

      Then you can hide the extra sidebar on other pages, or place it below the default sidebar.

      EDIT: Here’s a couple comments on using conditional CSS
      http://zeaks.org/topic/unique-sidebar-for-home-page/#post-8107
      http://zeaks.org/topic/skip-one-sidebar-on-selected-pages-template/#post-8075

  10. Pingback: Учимся добавлять widget area в дочернюю тему | nuqneH

  11. Matt Minten

    I am trying to add a second left sidebar below the one I created with your above code. My problem is that they are overlapping. You can see it on: http://ranchocordovaeventscenter.com/

    I have placed most of my code on StackOverflow to see if anyone can help but thought that maybe you could. You can see it here: http://stackoverflow.com/questions/14596091/overlapping-sidebar-content-in-wordpress

    Let me know if you can figure out a solution for me.

    Thanks,

    Matt

    1. Zeaks

      Hi Matt. Any reason you’re using new sidebars? I think you could get the same effect by just styling the widgets. Try adding a bottom margin to the top left sidebar, and clearing it, that might solve the issue.
      If you can’t get it working, feel free to use the contact form to send me an email and I’ll take a look at your entire code.

      1. Matt

        Actually the reason I wanted two side bars is because I am using a plugin that allows me to change the top sidebar (the sub-nav bar) depending on the page the user is on. This plugin has the option to replace a sidebars contents entirely. The lower sidebar is for a map and maybe some advertising that will remain the same throughout the pages. I would have to add the map code and all of the advertising to each of the instances of the changing sidebar.

        I have tried clearing and adding a margin to no avail.

  12. Fran

    Hi there,
    I have now got sidebars on my archive and category pages but not on my post pages – but not sure why? Where do I call ‘get sidebar’ or similar for the post pages – which template page – content.php or content-page.php? Or is there another reason they may not be displaying on post page? Cheers Fran

    1. Zeaks

      The Twenty Twelve theme 404 template does not display sidebars. You can add them by copying 404.php from the Twenty Twelve directory to your child theme directory. Open it and adding

      < ?php get_sidebar(); ?>

      Right above

      < ?php get_footer(); ?>

      You may need to make a few CSS adjustments.

    1. Zeaks

      Hi Janos. IE6 is an outdated, insecure browser and there’s no reason anyone should be using it that I can think of. I believe users can upgrade to ie7 at the very least, possibly ie8.

      Twenty Twelve does not support ie6, WordPress and Google do not support it either.

      1. janos

        I know that and I really hate IE6 o_O
        I had a nice period during the day when I thought I’d make an IE6 compatible css for a new site :) In fact, we have some visitors who still use IE5.5! Anyhow, the nice period is over, bad mood is back, I have no time to play with IE6.

        Your post is so great, that I added a second extra-sidebar to the right:
        http://i1210.photobucket.com/albums/cc419/kissja74/smiley/2013-03-10_223230_zps11dd5aa8.jpg

        (it’s on localhost, so can’t add live url)

        Thanks for this great post! :)

  13. Zeaks

    Looks great Janos. You may think you’re being “mean” by not making your site compatible with older browsers. But you’re actually doing users a favor by forcing them to upgrade their insecure browsers.

    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?

  14. Pingback: Öka bredden på en wordpressida i tema TwentyTwelve | Trotsig Frizon

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

    1. Zeaks

      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.

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

    1. Zeaks

      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.

      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.

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

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

      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

    1. Zeaks

      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.

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

  20. Petter

    Hi Zeaks,

    and thanks for a great tutorial! I’ve done some work in pure HTML & CSS, plus cmsms before, but no wp theming, really. After following your tutorial the layout of my site looks great, with three column layout for the post pages.

    However, I cannot get the three column layout work on the normal “pages”, nor the front page. Post pages are excellent, normal “pages” are just two-column. I’ve looked at single.php and page.php, but I don’t really understand what I’ll have to do to get the same layout on both. Would be immensely grateful for some help.

    Thanks again,
    /
    Petter

    1. Zeaks

      Hi Peter, the front page template is a unique layout and this tutorial doesn’t cover that template, in fact it purposely avoids making any changes to that template.
      The full width page template will not display any sidebars, but the sidebar (default) page template should display your new sidebar as it uses get_sidebar. If it’s not open a forum post and I’ll try and help figure out why.

      1. Petter

        Hi again!

        Found the error, it was just that my pages referenced an old page template, hence they didn’t get the correct layout. Once I realized this, it was an easy fix, and now everything has the three-column layout, great!

  21. susan

    Hi, I did every you said and ….. it’s working !!!!!

    Thank you so much!

    Just one little tiny problem… How can I make the middle column just a little bit wider?

    Thanks again!!!

    Susan.

    1. Zeaks

      Hi Susan, the widths for content and 2 sidebars are as follows
      20% + 50% + 20% = 90% of the site width. The leftover 10% is used for margins between the sidebar and content.
      Say you want to increase the content width by 5%, you’ll need to subtract 2.5% from each sidebar, or 5% from one sidebar. Whatever you add to the content, make sure to subtract from the sidebars.

      You might get away with adding a bit of width 1-2% to the content without changing the sidebar width, I doubt it though.

      1. Susan

        Hi, this works. Although I had to change the margin-left to 20 percent, because left sidebar and content shifted to the right after I changed the content width by five.

        Thanks again.

        Susan

  22. Susan

    Hi, sorry to bother you again…… One last question for today….
    I’ve added the left sidebar. Through text widgets I’ve added some logos. These logos have a light grey border around them. I’ve spent quite some time now to figure out how to get rid of these borders, but nothing seems to work.

    Could you please help me out?

    Thanks a million.

    Susan.

  23. jameswaterhouse2013

    Hi Zeak, Thank you so much for this article, I have created a left sidebar and it looks great! I was wondering how can i fix this sidebar so when my users scroll down it stays still? In the CSS you set the #extra-sidebar to be relatively positioned so when i apply position: fixed nothing happens. Any ideas?

    James

  24. giacile

    Hi Zeak, thank you for this great tutorial. I followed it and have succesfully built the extra sidebar, but actually I don’t need it on every page. Is it possible to create a new template only with the main sidebar?

  25. Daniel

    Hi,

    Thanks for the tutorial. I am having some issues. One the homepage the new column (doing the two right columns) is displayed below the new post column, rather than alongside it. On other pages it just shows up below the main sidebar.

    I thought taking an image would be easier:

    http://oi42.tinypic.com/nd6ekp.jpg

    Any advice? I followed your instructions above.

    1. Daniel

      I should also note that in the admincp I see this:

      ERROR: The themes directory is either empty or doesn’t exist. Please check your installation.

      I am using the theme though, the theme directory isn’t empty and does exist…

      1. Zeaks

        I can’t tell what’s causing the problem with a screenshot, but it looks like the content width isn’t right. Go back and check to make sure you’ve added each section of code properly, if you haven’t included the custom body class it could explain why the content width isn’t right.

        As for the error, try switching to twenty twelve, then back to your child theme in Appearance > themes.

    2. Daniel

      Hey Zeaks, thanks for the reply. I figured it out. Turns out part of the problem was I modified the header and/or some CSS that conflicted with the changes. I got it sorted out now.

      Thanks again.

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

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

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

  29. 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;
      }
  30. 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!

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

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

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

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

  35. Pingback: TRUCS DE TINY FORGE | TESTS

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

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

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

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

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

Leave a Comment

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

*
*