Twenty Ten the New Default Theme

TwentyTen the Category

Twenty Ten is the new default theme for WordPress as of release 3.0 .   I’ve been setting up sites using it for a couple of months now.   It is a great theme and there is a lot you can do with it.   I tweak it a lot.   Therefore, I’ve decided to start a new category dedicated to Twenty Ten Theme and modifications that can be made to it quickly and easily.

Some quick changes can make it look completely different.   The new header area and background layout area provide a great playground for variation in theme.

The WP team recommends any changes be made to a child theme and not the default.   I know one reason why and you need to be aware of this.

Every time you update WP the Twenty Ten Theme is replaced as well.   Any custom CSS you put in the default them is wiped out.   Same is true for any changes you made to the code in the various parts of the theme.   So Be advised YOU NEED TO BACKUP TWENTY TEN EVERY TIME THERE IS AN UPDATE!!   especially if you have made modifications.

I don’t like working with child themes.   Maybe someday, but I’ve had a little experience with them and find it very labor intensive to make changes.   I like firebug on one tab and the CSS editor in another.   Make a change and update.   Maybe I’m missing something.   But for now I edit the default theme itself.

Short, short posts

Some of these post are going to be very short.   Most of what I’ll cover are tweaks in the CSS that will make a difference in the appearance of the theme.   They will all be filed under TwentyTen.

Some will be a little longer.   It takes more than a few words to describe how to change the header image size and width.   Or change the layout to make the sidebar or content areas bigger.

If you are looking for ways to tweak Twenty Ten come here.

If you don’t find what you are looking for leave a comment, I’ll see what I can do and write a post on the tweak.

Example Post

Clear Both for Header Tags

You will find this statement in the CSS.

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
clear: both;
}

The clear both will make it impossible to display an image beside an h3 tag in your post.

The simple solution.

There is typically no reason to clear both on any header tag below an h2 tag.   Therefore change this to:

h1, h2,   {
font-weight: normal;
clear: both;
}

Your h3 and below tags can now be used with an image displayed either right or left.