post

Pimp Your Sidebar

Out of the box, the sidebar in the Twenty Ten theme is less than desirable. The sidebar is one of the most important elements of your blog and one of the first places your readers will look to, when they want to find something.

Default Twenty Ten theme sidebarThe problem with the default Twenty Ten theme sidebar is that it does not give the reader any useful information. The first thing the reader sees is a list of recent posts, which are the same posts listed on the home page. Next, there is a list of recent comments – which is great once you have people commenting on your blog. It’s not so hot when your blog is new and there are no comments, however!

The list of archives is equally superfluous for a new blog. Besides, who wants to search a blog by month and year, versus clicking on the categories listed in the navigation menu? Finally, there is a meta section that really serves no purpose, at all. As a reader, have you ever logged into a blog? Probably not.

If the Twenty Ten sidebar is a perfect example of what not to do, then what should your sidebar contain? First and foremost, the sidebar needs to provide the reader with your contact information and subscription options. If readers have to hunt for this information, the chances that they will subscribe to your blog diminish, greatly.

Widen the Twenty Ten Theme Sidebar

Wider Twenty Ten theme sidebar

Wider Twenty Ten theme sidebar

One thing that you probably noticed right away about the Twenty Ten theme sidebar is that it looks too narrow, compared to the main content area. The default width of the Twenty Ten theme sidebar is 220 pixels – but it is easy to make it wider.

To increase the width of the Twenty Ten theme sidebar, you will need to modify three classes in the style.css file; #container, #content and #secondary. It is best to make these changes in a child theme, so that they are not overwritten the next time you upgrade WordPress. If you need to learn how to setup a child theme, see Customizing the WordPress Twenty Ten Theme.

#container {
margin: 0 -300px 0 0;
}

The Twenty Ten theme uses a negative right margin of 240 pixels for the #container class. To increase the size of the Twenty Ten theme sidebar from the default 220 pixels to 280 pixels, subtract (we are working with a negative number, here) an additional 60 pixels, for a total right margin of -300 pixels.

#content {
margin: 0 340px 0 20px;
}

Likewise, the right margin of the #content class also needs to be plussed-up by 60 pixels, for a total of 340 pixels.

#primary,
#secondary {
width: 280px;
}

Finally, the #secondary class needs to reflect the new sidebar width of 280 pixels, as shown above.

Move the Twenty Ten Theme Sidebar to the Left Side

We can also modify those same three classes to move the Twenty Ten theme sidebar from the right side of the page, to the left. This is done by using left margin, instead of right, and floating the #secondary class left, instead of right.

#container {
margin: 0 0 0 -300px;
}

#content {
margin: 0 20px 0 340px;
}

#primary,
#secondary {
float: left;
width: 280px;
}

WordPress Twenty Ten theme with the sidebar on the left

WordPress Twenty Ten theme with the sidebar on the left

One of the best reasons to use the Twenty Ten theme is that it is so flexible and easy to modify into your own design. By spending a little time with your blog’s sidebars – one of the most important visual elements of your blog – you can create a better looking blog and give your readers the information they are looking for.

47 thoughts on “Pimp Your Sidebar

  1. i want to put 2 125×125 ads into my sidebar, i try this but not working into ny blog because my sidebar now wide enough.do u have any idea on how to do this?

  2. Great tutorial ! You helped me. I didn’t find how to make sidebar wider in no other article on web.

    Keep going !

  3. its been 8 or so months since i read this post – and tonight i came back to refresh my memory on how to tweak my sidebar – cool thing is that now i find the instructions very simple :) 9 months ago i struggled with them. Thanks so much for continuing these blog posts… i’ve learned so much and use your blog as my main wordpress learning source.

  4. Just started using Twenty Ten 1.1 on WP-3.1.1, is there any way to have different widgets showing in the side bar on different pages eg I’d like to put blog categories only on my blog page in the sidebar and on another page I would like to show only my address but in the same position as the blog categories widget.

    Hope that makes sense, any help much appreciated!

    • Kevin – you could code an if statement – eg. if (is_home()) around the primary widget area in the sidebar.php file to keep those widgets from being displayed on other pages, but it might be easier to just use a plugin. The Widget Logic plugin should help you out. Good luck!

      • Please HELP…

        OK, I had to reduce it to 250 wide but I really need it at 302 wide, the link below will no longer be an example of what is wrong when I change it to 302 px wide. I’m sure all the math was correct, what do I need to do to ensure pictures in my post dont get overlapped by my sidebar?

        If you are on my main page you will notice that ll the photos are same size, but click on a photo and go to a post you will notice the 1st one has no caption and is more to the left than all the photos that follow it. The ones that are to the right all get overlapped by my sidebar when I take it from 250 px to 302 px?

        • Cliff – the Twenty Ten theme is 940px wide, so when you increase the width of the sidebar it reduces the width of the main content area. You will need to reduce the width of the pictures to account for this.

          • Roy, thanks for the quick response. Is there no way in the style.css where I can increase the width of the main content area / overall theme?

            Also, I upload all my pics exactly 640 x 426 but it seems like in all my posts the 1st pic has no caption and is smaller, but the ones where we add captions wordpress is increasing the size of the photos? Is there an easy way to decrease the size of the photos (if I cannot just increase the overall width of the theme) without having to edit each pic individually? When I upload them I just keep it at default “none” alignment. Thanks so much for your help!

  5. Great post, I was easily able to follow your guide and widen my sidebar to 250 pixels to make room for some site badges and such. I have one question, is there a way to have both a left AND right sidebar? So essentially 3 columns? Or through edits make the “Secondary Widget Area” move to the top left opposte the “Primary Widget Area”?

  6. Hi,

    Just like the above code for widget container, how can we make similar changes to posts on the first page?

    Thanks!

  7. Hello Roy!
    Do you have any advise how to do a 3-column page for the front page (in Twenty Ten Child Theme)? My front page is a static page and it would be nice if it had 2 sidebars (left and right) and other pages have the normal sidebar on right.

  8. Hello there.
    Useful article, thanks!
    Any advice or links out there to allow my content area to wrap around my sidebar?
    I only have the menu in the sidebar and lots of text so it’d be nice to use up some of the extra space. Will I need to create my own page template?

  9. Helpful article, thank you.
    Any advice on allowing the main content area to wrap around the widget area?
    I want to have a small menu in the widget area only but then a really long static page full of text only content so it would be nice not to have a ton of wasted space.

    Will I need to create my own layout for this?
    Thanks

    • Hey Curtis – was hoping to get a chance to try this out, but I’ve been slammed all week. I am sure this will be pretty easy, though. Just get rid of the sidebar altogether, and float a custom menu (see http://tinyurl.com/2cd7j64) left or right depending on which side of the page you want it. You can give the menu div a height, width and use the CSS block element, and the page text should wrap around that nicely.

  10. First i want to say that Your site is my main info source on learning WP.
    I am using Your child theme and i have trouble with styling text links in text widget.
    I managed to apply some properties (custom font, font size etc.) but some just won’t listen (padding, font color, text alignment) but instead they inherit properties from sidebar links.
    I tried div class, span class, no success.
    Please help!

    • Thanks, I thought it would make more sense with screen grabs – so take a look at my new post and let me know if that answers your question.

  11. Please help me.
    The sidebar titles have moved from the top of the box for some reason and I cannot get them back. I have changed a small amount of code in css and footer (which should not affect anything). Any ideas?

    Thanks,
    Greg :- )

    • Greg – try giving .widget-title some padding;
      [cc lang="css"].widget-title {
      background-color: #FE0000;
      color: #222222;
      font-weight: bold;
      padding: 10px o;
      text-align: center;
      }[/cc]

      You can play with the 10px to get the right amount of fill that you are looking for – good luck!

  12. I am having trouble getting rid of the space between my sidebar and my content. You can see the white space between the slideshow and the “Donate” button and it’s driving me crazy. I have tried getting rid of padding and margins everywhere I know how, and it’s still not fixing it. Any suggestions? I would like the slideshow to be 5px from the sidebar.

    Thank you so much for your help!

    -B

    • Brittani – it looks like your sidebar and content are sitting right up against each other, but there is 10px of padding-left in the sidebar (#primary) and there is something going on between .entry-content, .entry-summary and #content but I do not see what is causing that space.

  13. Hi… I have a left hand sidebar using the code below, but want the content area to be wider by about 150px, can anyone help..thanks

    /*
    LAYOUT: Two columns
    DESCRIPTION: Two-column fixed layout with one sidebar left of content
    */

    #container {
    float: right;
    margin: 0 -240px 0 0;
    width: 100%;
    }
    #content {
    margin: 0 280px 0 20px;
    }
    #primary,
    #secondary {
    float: left;
    overflow: hidden;
    width: 220px;
    }
    #secondary {
    clear: left;
    }

  14. my sidebar is wider.. i like it ;) but how do i decrease the space between the main content and the sidebar? i assumed (and tried) it in the content margins but thats not it. I tried making the sidebar wider yet.. but it doesnt decrease the 20 or so px between main content and sidebar.

    thanks.

    • i think i just ‘got’ it.. my margin/padding on left of content is 9px. my padding/margin on right of sidebar is 9px. in theory its also 9px on left of sidebar and right of main content – which makes 18px – which is why it looks like the sidebar is too far to the right.. now to find how to trim down those two 9px that make up a total of 18px!

  15. I was able to do this quite easily thank you for the great tutorial… one thing more though – my sidebar is higher than my main content… i assume i would have to add padding to the top of the sidebar or a larger margin – where would i find the right bit of code to do that? Thanks.

    • one more thing ;) – i’ve not only made my sidebar wider with your tutorial, but i’ve increased the overall wrapper width as well… however.. now I need to figure out how to widen my header box to match the rest of the content… would that be in my header.php or in my style sheet? Thanks.

      • Do you mean making the header-image wider, Donna? If so, you can add a new custom function to your child theme’s functions.php file:
        /**
        * Change the default header size to xxxpx by yyypx
        *
        */
        function brick_header_height($size){
        return yyy;
        }
        function brick_header_width($size){
        return xxx;
        }
        add_filter('twentyten_header_image_height','brick_header_height');
        add_filter('twentyten_header_image_width','brick_header_width');

        Then, in the style.css file you will probably also want to increase the width of the navigation menu (see width: 940px; in the #access class).

  16. Maybe you can help me with the whole child theme.
    My themes creator has also created a child theme (twenty ten- buddy press). I have the child theme installed but not currently active. I have read articles on child thems and just not quite grasping it. To date I have gotten around a child theme by just keeping backups of my style css, etc, in the event of updates, then re-pasting the changes.

    When I applied your changes in the parent theme(I guess it wont work there??) it did not work, widgets went to the right and page did not aligh correctlty and no three column. I have activated the child theme to take a peek at it, just looks very raw, menus all messed up, etc… then went back to the parent. I guess my question is. To make changes in the child theme, what else has to be done? Do I need to ftp this into my wp directory? Do I activiate the child theme and work from there then it automatically goes into my parent theme, then go back to the parent theme?Sorry, this whole things has be confused.Just don’t understand how one goes to the other, Thanks for any help.
    *Also, I have not gone to thirty ten as it says it is not BP compatible

    Thank you

    • Marck – here is a 3-column child theme for Twenty Ten: http://aaron.jorb.in/thirtyten/

      Regarding your use of the CSS above, select style.css in the Theme Editor (with your child theme selected, not the base Twenty Ten theme) and search for;

      #container {
      float: left;
      margin: 0 -240px 0 0;
      width: 100%;
      }
      #content {
      margin: 0 280px 0 20px;
      }
      #primary,
      #secondary {
      float: right;
      overflow: hidden;
      width: 220px;
      }

      Replace that original Twenty Ten theme code (it should not be in the child theme) with;

      #container {
      margin: 0 -300px 0 0;
      }

      #content {
      margin: 0 340px 0 20px;
      }

      #primary,
      #secondary {
      width: 280px;
      }

      Good luck!

  17. Phil I notice when you put your code into a twentyten child theme to expand the sidebar it works fine at 100% defaul size, but if you zoom out my pages main content collapses.

  18. All I want to do is add a few small photographs and graphics and badges to my sidebar. I wrote them into the code around the widget divs, and they show up beautifully in every browser but Firefox. Oh – and if I do a content search, the single post pages have those images spread all over the bottom of them. But in the main blog content pages, the sidebar looks like I want it to. In Firefox, you can see the header, but the sidebar (which is on the right, where I like it) overwhelms the body content.

    I don’t understand why they didn’t make it so that you could put in your own photos or flickr badges or whatever. It seems to me that this is not an unusual thing for a blogger to want to do????

    • Hi K – it sounds like you are adding the code to a template file, is that right? Try adding the code to individual text widgets, instead.

  19. Thanks Roy, Ive done as you suggested, I think that the site looks much cleaner and more professional. Ive also changed the social buttons so that they don’t dominate so much, added shading to the page, added a video page and video in the side bar and a store. Any other suggestions to clean it up further? Also how would I remove the EDIT link in the bottom of pages? Thanks…

  20. Hi Roy, thanks for your help on this. I’m setting up some niche sites and want to get the child css for this one right and then do the other ones. The site I’m doing atm is http://www.tropicalholidays.info/ the side bar looks much better now but none of the widgets are centered, how could I fix this up? Also the bottom area of the pages (near the larger ad) looks real open, any thoughts / suggestions to fill in / improve this area? Or any other suggestions to make the site appear better would be greatly appreciated. Its just not quite right from an appearance point of view atm. Thanks

    • Phil – I assume you are using text box widgets, so try wrapping the code in a CSS class…
      [cc lang="xhtml"]

      your widget code

      [/cc]

      And then add to your CSS stylesheet…

      [cc lang="css"].anything {
      text-align:center
      }[/cc]

      I agree with you that the bottom of your page could use some work. It’s not horrible – it just looks a bit confusing, with the navigation link, social bookmarks & adsense all together, like that.

      I think I’d be inclined to lose the “new products and articles” banner, and switch to the wide horizontal adsense add (I forget the dimensions, but I remember them having a wide, skinnier one).

  21. Hi Roy, this is prefect exactly what I am looking for, I like twenty ten but not the side bar, how would you suggest to change the side bars appearance in child css to make it look more attractive? Maybe some nice borders and shading around widgets or something like that? What codes would I need to add to child css? Thanks

    • Thanks, Phil. There are a couple of CSS classes that you can modify in your child theme, to change the look of the sidebar widgets; .widget-title and .widget-container. My child theme uses them like this;

      .widget-title {
      color: #222222;
      font-weight: bold;
      }

      .widget-container {
      background-color: #D0E4F5;
      border: 5px solid #EBEBEB;
      margin: 0;
      }

      • Hi,

        similarly, how can we add shades or change background colors for posts on the main page?

        thanks

Comments are closed.