Installing New Default Theme for WordPress 3.0
WordPress 3.0 comes with a new default theme known as Twenty Ten. I was eager to try it out on a WordPress site.
Why did I choose Highland Park Environmental News for the new default theme? I don’t like the old theme, don’t have updates for it, and never cared for the colors. Here’s the old theme:
As this news site doesn’t get updated as often as one might like, it is a good test site for a new theme.
I want a theme that is easy to update. So I wondered – menus, header – will they be easy to tweak as well?
Here’s what I did:
1- I took a screenshot of old theme. I also copied the header image to my hard drive.
FYI, the photograph of the running deer was taken by Arnold Clayton Henderson, who spent a lot of time on environmental issues in Highland Park, including providing most of the content for the website. He has since moved to California, and we miss him!
2 – I looked at widgets. I must be using all hard-coded widgets – there is nothing listed. But you might be, so copy them down.
3 – I clicked on Themes, clicked on the Twenty Ten theme, previewed then activated the theme.
4 – The header was ready on my hard drive.
The menu on the left has a header item now – I just clicked on that and added the header.
5 – What did I want in the sidebar? Since I had done a screenshot, I could look at it to recall all the details. Or I could reactivate the old theme and look in that manner.
6 – Creating menu: Why doesn’t it appear? Need to save something somewhere.
7 – I clicked Save Menu and the new menu appeared. Need to click Save Menu each time you add a new item to the menu.
8 – Sidebar – Widgets. All I had to do was click, drag, save. Easy. Looks like lots of options for widgets are available – I just drag those to the sidebars, as I do in other themes.
The only issue I had was the font for the main content showed up as a serif font, and I wanted sans serif. So I went into style.css (you can do it from the Adminstrative back end, but better yet, do it on a copy on your hard drive and upload the changes while saving the original, just in case) and moved body down to the sans serif section.
I also found this post called WordPress Twenty-Ten theme modifications with even more discussion about tweaking the CSS for Twenty Ten. You might want to refer to this post, for example, if you are unhappy with the spacing in your blog.
I asked if anyone else has used Twenty Ten on Twitter, and Mark Headrick showed me his blog in Twenty Ten. Note how he changed his menu color to blue – you don’t have to stick with the standard black if you can tweak a little CSS.
I noticed my good friend Michelle of Rambling Woods is using Twenty Ten on her nature blog, because one of the commentator said, I like how you keep changing the background. I looked “under the hood” (i.e., in the source code), and I saw this:
See that twentyten directory in the path name? That means she’s using our theme.
Here’s the screenshot:
This is a smart approach for Michelle, because she can easily change her header or her background. Also, she made use of the menu in a creative way, making it much longer than just one line of links.
Finally, here’s how my new Twenty Ten themed blog now looks:
The background is still a dull gray, so if you have any ingenious ideas for what to use as a background that’s not too distracting, feel free to let me know.
More on the new Twenty Ten theme:
[...] This post was mentioned on Twitter by Gabriella Sannino , Leora Wenger and Olof, Olof. Olof said: RT @leoraw: Installing New Default Theme for WordPress 3 http://biz.leoraw.com/2010/07/installing-new-default-theme-for-wordpress-3-0/ T … [...]
Very useful and informative blog post concerning Installing New Default Theme for WordPress 3.0. I have bookmarked your blog for future posts.
Glad you found it useful. If you decide to try it, I’d be curious to find out how it goes. Feel free to ask questions by commenting on this post.
The final results of your modified basic theme looks good !
They should release the basic theme with more options for personalization, so we can avoid dealing with the CSS. It´s time consuming and have to be redone on every update of the theme.
Nathan Rodriguez´s last [type] ..Netbook Acer Aspire
Nathan, I suspect they want to keep it simple, but I can understand the desire to personalize more easily. If I hear/read anything more about the theme, I will post links to Twitter and my FB page and maybe write another post.
Does this work with the existing theme that I am currently using. Or do I have to change to this new theme?
You would have to switch themes to use it.
Thanks for mentioning my site. After Twenty Ten came out with a theme update, I changed my theme to be a Child of Twenty Ten instead so that if they ever update again, my modifications will remain intact and I’ll know exactly which files I may need to compare. This describes how to use Child Themes: http://codex.wordpress.org/Child_Themes
Mark H.
Mark, great point about child themes. Yes, I did the same with this theme (created a child theme) – and I’ve been meaning to write a post about child themes. Coming soon.
I’m using twenty ten for my new school’s website, can someone please help me change the color of the page titles? You can’t see the titles unless you hover over each one. I have no idea how i’ve been able to change as much as i have thus far!:)
That is actually fairly simple…for someone who knows CSS.
Look in the CSS for
.menu-item
and see if it lists a color. The color will most probably be written in hex. You can experiment with other colors until you find one that works. Listamatic (http://css.maxdesign.com.au/listamatic/) is one of my favorite sites for menus and CSS.
I seem to only be able to change the color that lights up when I hover over each page tab, as well as the font color of the page I currently have open, but the rest of the pages are almost impossible to see because of the font color…where in the CSS can I change the font color of the page titles?
Maria´s last [type] ..Välkommen!
Enjoyed reading the post. I am currently working on my frozen yogurt site at: http://www.frozenyogurtrecipe.org/. In fact I got some great design tips here at Installing New Default Theme for WordPress 3.0 | Websites for Small Biz. Looking forward to reading more.
Your frozen yogurt site made me hungry. It just needs a mouth-watering header photo. WordPress is coming out with a new Default Theme soon, called Twenty Eleven.