Three Column Twenty Eleven – Update

Here’s a small update to the Three Column Twenty Eleven theme. I forgot to add support for the extra sidebar for the default layouts, it should no longer drop to the bottom of the page.

Gallery attachment page has also been fixed and GPL license included.

Please download the new copy.


    • says

      Yes it’s a child theme of Twenty Eleven, you can view the instructions on the ReadMe.txt in the zip.

      Install it like any other theme, make sure Twenty Eleven is installed as well.

  1. aces says

    What have you changed apart from the version numbers etc.?

    When comparing the files in winmerge there are no code differences…

    • says

      The changes are listed in the post and in the readme.

      Edit: I need to do these things earlier in the night, I linked the old zip, sorry about that, I’ve fixed it, thanks for noticing.

      Basically the additional code was this

      /* Default right sidebar (Twenty Elevens) with extra sidebar alignment fix*/
      	float: right;
      	margin-right: 7.6%;
      	width: 18.8%;
      /* Left sidebar layout (Twenty Elevens) extra sidebar alignment fix */
      .left-sidebar #extra-sidebar {
      	float: left;
      	margin-left: 7.6%;
      	margin-right: 0;
      	width: 18.8%;

      And a couple lines to fix up the attachment page.

  2. says

    This is absolutely amazing, thanks a lot!!! Now, I have a question. Before I found your magnificent child theme, I created mine, because I wanted to make some changes to the header of the site, such as adding my own logo and removing the search bar (as you can see if you visit my site). How do I do that now with your child theme? I don’t see the “header” file anywhere… OR, what should I copy to my child theme, in order to add the third column and where? Sorry if I’m asking too much, but THANKS in advance. :)

    • says

      Sorry for the late reply your comment got rolled off the recent comments widget.

      Looks like you figured it out, but you don’t need to edit the header.php file to make those changes. I created a post on how to add a logo just using css, and you can use #branding #searchform { display: none; } to hide the searchform.

      The third column is already added to this child theme, just goto Appearance > theme options and select the layout you want to use. Then goto Appearance > Widgets and add widgets to the default sidebar and the extra sidebar.

      If you want to make more changes, you might want to check out NomNom theme (link is at the top) it has optiosn to hide the searchform, several different layouts and lots more.

  3. says

    Thanks, I still haven’t figured it out :(

    * I want my site to have 3 columns plus…
    * My own logo to the left, blog title and description to its right and erase the search form. (the same way the header looks in the theme currently installed)

    I downloaded NomNom and will play with it, but… where can I eliminate the font’s shadow? Thanks! You are very, very helpful! :)

    • says

      Unless I’m mistaken, your site isn’t using either of my themes. Explaining how to add an extra widget area/sidebar is far too complicated for these comments, if you were using the child theme from this post you could follow the instructions I posted in the previous comment.

      I explained how to remove the search form (you’ve already removed it form your site), use my method, or the method you used for your current theme.

      I posted a link to a post that explains several ways to add a logo to your site, alternatively you could simply use the code from your current theme for the logo.

      I don’t mean to be rude but I can’t help you if you’re not going to bother reading my comments. Good luck

      • says

        Thanks, I did read your comments, and I did try to do what you said, like you said. The reason I changed my theme and left if that way was just to show you what I wanted to do with my header on your 3 column theme that I have installed, just not active right now, but I can’t find how… Thanks anyway.

      • says

        When you activate either of my themes, goto Appearance > Theme Options, and select a 3 column layout. Then goto Appearance > Widgets and add widgets to the “Main sidebar” and “extra-sidebar”.

        Add the code I posted above to hide the searchform to your child theme style.css. If using NomNom theme there is an option to hide the searchform Appearance > NomNom Options > General Options.

        I didn’t understand when you said “I still haven’t figured it out” then posted the same thing you did in the first post. If you didn’t understand part of them, I’d explain it in more detail.

        For the logo. I would suggest opening your old theme style.css and copying the CSS you had for your logo into your new theme style.css and moving the image over to the new theme, since the logo was in the position you wanted before.

        It looks like you’ve got the rest working, your site looks great.

        If you still need help adding the CSS for the logo, open a post on the forums and copy your old theme style.css code in the post.

      • says

        OK I posted in the forums the coding I had in my old theme’s files. Oddly enough, I just realized that my logo IS showing in individual posts, but not in the pages (home, about ,faq, etc)


  4. says

    @Mariangie that’s odd. The header is called on all pages and posts . Could you zip a copy of your current theme and send it to me in a message on the forums and I’ll take a look.
    Direct any replies to the forums please.

  5. says

    Hi – the site is not yet live for to look at (I could PM you credentials) – I am doing 3 column left/right sidebar.

    My question is about /* Extra sidebar fix for narrow browsers/media devices */ coding.

    I’ve added this – and it fixed a disappearing right sidebar – but is it possible to have the 2 sidebars side-by-side below the main content – rather than stacked below?


    • says

      It’s possible, it depends on the width of the content, and the width of the sidebars when viewed on mobile though.
      I’d have to play around with the CSS to figure it out, I’ll try and take a look tomorrow and see what I can do.

  6. avi says

    Thank you so much for creating this template. Any recommendations how to create a fixed width for each column, with the content in the center of the two sidebars? I’m going mad trying to figure it out…

    This is what I modified in the CSS — but perhaps the divs are stacked improperly for this to work?

    .three-column #page 
    .three-column #primary {
      margin: 0 auto; 
      width: 1050px;
    .three-column #content {
        float: left;
        width: 650px;
    .three-column #secondary {
        float: left;
        width: 200px; 
    .three-column #extra-sidebar {
        float: left;
        width: 200px; 
  7. says

    I have the latest version of the child theme that’s supposed to fix the alignment of the side bar for the original two-column template, but it’s still not aligning properly. I’m using the showcase template on my homepage. Do I not have the option to use all three layouts (1-column, 2-column, & 3-column) in one site? Please advise.

    • says

      The theme as is will not display different sidebars on different pages. You would have to use conditional CSS to do this.

      I took a look at your site but it doesn’t look like you have any widgets active in the sidebars so I’m unable to view the problem. Please open a forum post if you still need help with this.

  8. says

    Can you help? I downloaded this but its still not giving me an option for three columns? What am I doing wrong? Thanks

    • says

      Make sure you have Twenty Eleven installed, then visit Appearance > Theme Options, you should see the different layouts on that page.

      • says

        yes i have that theme in place, not sure what I did but eventually got it, thanks a mill. I love it!

  9. says

    hi zeaks you are really awesome tutor …start online tutoring (sorry for unwanted advice) ..i am really thank you for helping about wordpresss 3 layered layouts…
    ..i am also freelancer ..if you find some work to give as freelancer contact me on +91-9586127360 or email id would work together and ofcourse see my portfolio as i am building my own firm in india…please talk me at least once..


Leave a Reply