Three Column – Twenty Eleven

Lots of people have asked how to create a three column Twenty Eleven, so I decided to take NomNom theme and strip it down for those who just need the 3 column layouts.
Simply install, and check Appearance > Theme Options to see 3 new 3 column layouts.
Gallery thumbnails look best at around 125×125 px because of the narrow content with new layouts and will allow 3 gallery thumbs horizontal.

Please comment if you notice an issue.

twenty-eleven-three-column

Download for Free!

79 thoughts on “Three Column – Twenty Eleven

    1. Nellie

      already found the solution (and for those looking for it: delete the code

      /* Extra sidebar fix for narrow browsers/media devices */
      @media (max-width: 800px) {
      #main #extra-sidebar{
      		float: none;
      		margin: 0 7.6%;
      		width: auto;
      	}
      }
      

      from the child style.css, as well as the similar code for media devices found in the twentyeleven style.css.

      1. Zeaks

        Hi Nellie. That will remove it, but this is the way Twenty Eleven is designed.
        There are articles on keeping the sidebar in place on mobile devices http://www.transformationpowertools.com/wordpress/twenty-eleven-sidebar-adaptations-for-hand-held-devices

        I also found this article on optional menu layout and header http://digitalraindrops.net/2012/03/mobile-twenty-eleven-option/ you might want to check them out, I’m thinking about adding them to the last update of NomNom.

  1. Zeaks

    This theme has been updated to 1.1, I forgot to add the extra sidebar support for the default layouts. Also added a fix for the gallery attachment page.

    @Nellie I misunderstood your comment, that issue should be fixed now. But keep in mind the default Twenty Eleven layout drops the sidebars below the content when viewing from a media device.

    1. Zeaks

      I would probably try to add it to #page if you don’t want it as a background image. Thats the area that your theme is withing, you’ll also want to remove the box-shadow from #page if adding an image.

  2. Ratatosk

    Thank you for your work and sharing it, your website is usefull and helped me to better understand WordPress.
    I set this theme with 3 columns, left+right sidebars, all works good with normal posts, but is it normal that when a page is displayed, the sidebars don’t show ? And the width of a page is narrower than a post…
    Thank you for you help ! :-)
    Another question : how can I reduce the sidebars width ? I read http://zeaks.org/twenty-eleven-change-sidebar-width/ but it is different…

      1. Zeaks

        Sorry, you are right, there is an issue when using the default page template, I will fix it today and post an update. Download it again, I’ve updated the zip. With so many different configurations it’s not hard to miss something when using a particular layout. If you notice anything else wrong with it let me know.

    1. Zeaks

      The tutorial example uses the left sidebar layout. Look at the code and pay attention to what margins I’ve increased and decreased (I’ve commented them) and you’ll figure it out.

      I might re-write the tutorial and give examples for both sometime, but the tutorial will only be for the left and right sidebar layouts you’ll still need to understand the CSS to adjust the 3 column layouts.

          1. Ratatosk

            No more need, thank you. :-)

            But : how do you set a background image to the “balloon speech” that shows the number of comments, please ? The balloon itself can stay white/blue but there is a rectangular white area around, I would like to set the same background as my page…

            Thank you for your help :-)

  3. Alejandro

    Hi, thank you for your work and excuse me for my spanglish ;)

    I want to know if it is possible to change the layout dynamically. For example: use by default the “Content on left” layout, but use the “Content on right” layout for a certain page.

    Thank you for you help!

    1. Zeaks

      It can be done using conditional CSS and page IDs. Take a look at the style.css in NomNom, you’ll see the right and left sidebar layouts. Copy whichever one you want to use for a specific page, then check the body class of that page EX: page-id-7687 then add the body class to the CSS you copied from style.css.

      EX:
      .page-id-7687 #content { }
      .page-id-7687 #primary { }
      .page-id-7687 #secondary { }

      Then only that page will use that CSS. It’s basically the same idea as using conditional tags http://codex.wordpress.org/Conditional_Tags just with CSS

      1. Ivan

        Yes, but I use left right and center columns. (left and right are for navigation), the middle one for posts. And no matter what I do, right column cannot be enlaged, it just fall bellow the content

        1. Zeaks

          You’ll need to read the post again. It doesn’t matter if you’re using left or right or three column layouts, the same rules still apply. You’ll need to look at the CSS used for the layout you’re using, and adjust it as it explains in the post.

          If you need more help with this, please open a forum post and show me the code you’ve been using to adjust the sidebars and a link to your site.

  4. Monpelaud

    Hi,

    I’m looking for a twenty twelve child theme with 3 column like “Three Column – Twenty Eleven”.
    Do you plan to upgrade “Three Column – Twenty Eleven” child theme to a Twenty Twelve child theme.

    Best regards

  5. Zeaks

    @Monpelaud and @Michael yes it is possible, and I’m about to release a child theme hopefully tomorrow with 3 different 3 column layouts and a left sidebar layout, along with a lot of other features.

    Here’s a full list

    • 3 color schemes Default (white) Dark and Grey
    • 4 new layouts, left sidebar, left and right sidebar, 2 sidebars left and 2 sidebars right.
    • Color picker for links
    • BBPress template, matching styles for all three color schemes
    • Simple options similar to Twenty Eleven
    • Wp-PageNavi ready and styled (install and you’re done)
    • Second navigation menu under header
    • Three footer widgets
    • Custom page template – Nivo slider at the top with 4 grid styled posts under it
    • Easy to add images to nivo slider, just select the posts you want to display in it with a select button.
    • New mobile menu using selectnav.js (easier to use on mobile devices)

    There’s a few features I’m still working on such as an option to display excerpts with smaller post thumbnails or normal posts.

    You can check out the demo here http://zeaks.org/ttodemo/

  6. wihdan

    i’ve read that post. thank you. but i still dont get it. can you explain again with example how to change width in your “Three Column – Twenty Eleven”. about which file *.php and css that i must edit. sorry i’m new. but i like your theme and want to apply it in my website.
    -sorry for my bad english-
    Thanks in advance.

    1. Zeaks

      Sorry but the post explains it quite clearly and gives examples. It will just be CSS you’ll need to edit. If you want to reduce the width of one sidebar, make sure you don’t increase the other sidebar by anymore than what you’ve decreased the other by.

      If you have a site up, I’ll take a look through firebug and give you some CSS to work with. Please open a forum post though.

  7. wihdan

    Wow, fast response. many thanks…
    I just download apply the theme that you give in this post. the css is the same as you share. I just try to make the content and right sidebar larger, and the left sidebar smaller.
    can you tell me in which line I must edit in style.css?
    -sorry for my bad english-
    Thanks in advance.

  8. wihdan

    Hi Zeaks, finally I made it. I change the right sidebar wider than left one. Thanks for your tutorial…
    I also change the max width to 1140. works great, but the site title won’t move. How to change the position of my site’s title?

    1. Zeaks

      Take a look at this CSS, I’m not sure exactly how you changed the sidebar widths but if margins were reduced, you can use this to match the title, search form and menu items with it.

      #branding hgroup {
          margin: 0 4.6%; /* decreased by 3% */
      }
      #branding #searchform {
          right: 4.6%; /* decreased by 3% */
      }
      #access div {
          margin: 0 4.6%; /* decreased by 3% */
      }

      Change the margins to whatever you’ve used.

  9. Ruth

    I have your three coloumn child theme working great – but I don’t seem to have access to the two column options PER PAGE in the template options. I only have default, sidebar and showcase as options per page – and if my default is a 3 column – then that is what shows as the “sidebar” option as well.

    What do I need to add to where to get all the layout options available in my INDIVIDUAL page editor ?

    1. Zeaks

      Hi Ruth, the page template will display the same sidebars as the rest of the blog. You can set it up on a page per page basis to show 2 columns by using conditional CSS. If you need help with this, please open a forum post.

  10. Александр

    Подскажите почему ваш плагин не устанавливается
    Распаковка пакета…

    Установка плагина…

    Пакет не может быть установлен. Подходящих плагинов не найдено.

    Плагин не удалось установить.
    очень надо помогите

  11. Hozey

    Cannot make a child of layouts. Get this message: The “TwentyEleven-Layouts” theme is not a valid parent theme. Everything this newbie reads says don’t do anything with the original theme, always, always use a child. Any suggestions?

  12. Zeaks

    This Twenty Eleven child theme used twenty Eleven theme as the parent theme. You must have that installed. Once you do, upload this theme and activate it. Visit Appearance > Theme Options to choose the layout.

  13. Hozey

    It’s the newbie again. Thanks for the reply about the child. I’ve made changes to the style.css to change the header image, remove the header text, remove padding above header image, remove search box from menu bar. rempved bubble from posts, and replaced Powered by WordPress with an image in the footer.php, which I copied over to the TwentyEleven-Layouts folder. All of these changes were applied and look fine.

    Any changes I try to make to the style.cc to change the text of posts don’t get applied. Here’s what I’ve added that isn’t working:

    /*Reduce Space between Paragraphs*/
    p (
    margin-bottom: .5em;

    /*Indent Post Paragraphs*/
    p {
    text-indent: 1.5em;
    }

    I’m working on a local server using XAMPP DesktopServer.app by ServerPress.com. I’m on a Mac running 10.8.4. I did not change the path of the style.css file in your file.

    Please help me figure this out.

    Thanks,
    Hozey

  14. Zeaks

    I don’t have this theme installed, but usually when something like this does not work, there’s another bit of CSS overriding it.

    You may need to use something like .entry-content p, whatever it is i don’t see anything in the child CSS that would prevent the changes, it’s most likely Twenty Eleven using a more specific class.

    Try using FireBug to figure it out, it should show you the classes preventing the changes from showing.

        1. Hozey

          For some reason putting code in to get rid of the bubble on each post before making the formatting code changes was kicking the formatting out. Moving the bubble code below the formatting did the trick.

  15. John Williamson

    Hi Zeaks, Im trying to make it so that I can display different columns on different pages of my site. I downloaded the theme and it works great but I just cant seem to be able to get different pages to display different amounts of columns/sidebars. I have created a custom template but can not for the life of me figure out which code goes where involving the sidebars.

    Essentially I would like to have some pages with 1 sidebar 1 column and some other pages with your sidebar/column/sidebar design.

    Thanks very much for the great wordpress advice keep up the great work.

    1. Zeaks

      Hi John, you will need to use custom CSS to tell your theme what pages you want 3 column or two column. There’s many comments and posts about how to do this throughout the cite but here’s how it works basically.

      Start by using the three column layout, then lets say page-id-220 you wanted to show a 2 column layout.

      .page-id-220 #extra-sidebar { display: none; }

      The content area may need to be increased but this is the basics of it. You’ll need to be able to view the body class for the page using a program like FireBug.

  16. Hermino

    Hi,

    the additional three column design is neraly perfekt for me, thank’s a lot!
    One thing: Is it possible to have two or only one columns (text + sidebar, text only) on some pages?
    And if. how do I get there.

    (sorry for my simple english, and I am an WP newbie).

    Regards, Hermino (Germany)

    1. Zeaks

      Id need more details than just a “Theme is Broken” message. The three column Twenty Eleven is a child theme, I just tested it and it’s working fine as far as I can see.

      Open a forum post if you have more details on the issue and I’ll try to help you.

  17. fatz

    Hi there,
    thanks for you fast reply! so thats what I was doing.
    I updated WooCommerce because I had to. After that the page went blank white and I couldnt access the Dashboard. After renaming the folder “themes” into something else the site was accessable again. If I than activate the Twenty Eleven theme (after renaming again to “themes” via ftp) everything is fine. But when I than activate the 3 Columns Theme again the blank white page appears.

    A while ago WordPress told me that the 3 columns theme is broken. thats where I am at the moment and I don´t know how to solve that issue. I love you 3 columns child theme and have used it all the time. still want to use it because its the best in my opinion…

    please don´t make me cry! ;)

    thanks so much for having a look into my case!

    greetings
    Fatz

  18. fatz

    hello there,
    yes, I´ve tried activating a fresh copy of the child theme which I took from your site. It looks like the css is not readable by the system. there is not style at all. if I activate the style.css I´ve worked with the page will go blank.

    is your theme compatible with the newest version of woocommerce and wordpress?

    I don´t know what to do at this moment and am hoping for you help.

    thanks so much in advance

    greetings
    Fatz

    1. Zeaks

      There s nothing wrong with the style.css in the download I just tried installing it on a test site everythign works as it should. If twenty Eleven is compatible with woocommerce then this theme will be. This theme simple adds more layouts to the theme options than what is available in the parent theme.

      If you’re getting errors such as style.css is missing, I’d suggest taking a look at wp-content/themes and checking your theme to make sure the file/folder structure is correct. Also ctry validating your CSS if you’ve made any changes to the original.

      If that doesn’t fix the problem I can take a look at it for you if you want. Use the contact link at the top of this site with details on your problem, FTP login information and login info to an account that has access to appearance > themes on your site.

Leave a Comment

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

*
*