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.


Download for Free!

80 thoughts on “Three Column – Twenty Eleven

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

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

  3. Александр

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

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

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

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

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

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

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


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

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

  9. Hermino


    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.

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


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


    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.

  12. Jurgen

    Hello Zeaks,

    Three Column – Twenty Eleven: This is exactly what I was looking for. One little extra would be fine: I’d like to switch between 3-column-template and 2-column-template (with sidebars on left) for different pages. Standard template shows no sidebars at all. What do Ihave to change?

Leave a Comment

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