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.
The 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
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.
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.
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.
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.
margin: 0 0 0 -300px;
margin: 0 20px 0 340px;
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.