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

        I also found this article on optional menu layout and header 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 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.

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


    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

  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.

Leave a Comment

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