How to change the width of the sidebar

The TwentyTen sidebar is, by default, 220 pixels wide.

The DIY Blogger with the original sidebar width

This, for many, is going to be a problem, because it makes it impossible to place two 125×125 adverts or banners next to each other.

The obvious way to solve this is to widen the sidebar.  The width is defined in the STYLE.CSS file in the theme directory, which can be edited in WordPress administration panel.

The trouble is that you have to change not just one but three values.  For my example, I shall widen the sidebar by 100 pixels:


1. Log into WordPress using an administrator account.

2. Now click on “Editor” in the “Appearance” section of the sidebar.

Click on Editor

3. Next, click on “Stylesheet (style.css)” on the right-hand side of the screen.

Open style.css

4. Scroll down to the area labelled “LAYOUT: Two columns”.

The two-column layout area of the stylesheet

5. Here are the three values that we need to change:

The three values that need changing

6. Subtract 100 from the second value on the “margin” line in the “#container” element:

The container margin

7. Add 100 to the second value on the “margin” line in the “#content” element:

The content margin

8. Add 100 to the width value in the “#primary, #secondary” element:

The primary and secondary sidebar widths

9. Now save the changes, and the sidebar should now be wider and the content narrower:

The DIY Blogger with the wider sidebar

Of course, you can replace the 100 with a different number to suite your own design needs.

About Graham Tappenden

Graham Tappenden is a blogger from Germany. He has written code for WordPress themes since 2006 and been creating websites since 1994.
This entry was posted in TwentyTen and tagged , , . Bookmark the permalink.

Leave a Reply

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