How To Modify the Default TwentyTen WordPress Theme

The TwentyTen Theme that comes as a default theme with wordpress is a very popular theme because it is simple and elegant. If you would like to modify the theme, here are the steps you have to follow:

(If you have the proper tools, life becomes easier. The recommended tools are Macromedia dreamweaver (trial version if not the paid version), EasyPhp (converts your windows desktop into a webserver with Apache, PHP & MySql), Firefox and an extension called “web developer”. Web developer lets to view the css information of the web page. This is invaluable when you are trying to see the elements of the page that you want to change).

You can accomplish everything with even just notepad though it is obviously a little more time consuming that way.

Steps:

(i) Make a copy of the twentyten theme and name it with description and date to aid identification (e.g. name the copy as mysitetheme_020612). Open the style.css file and change the theme name to reflect the new theme name. Also change the theme uri and author name. Open the screenshot.png file in Paint (or other image editor) and change it in some way to make your mark. The theme name & screenshot will now appear distinct in wordpress.

It is important to always make a copy of the default theme and make your changes there because when wordpress updates, it overwrites the default folder and all your changes will be lost.

(ii) Change the size of the sidebar:

According to google adsense, one of the best performing ad units is their 336×280 rectangular box. If this is placed on the right sidebar, it catches the eye of the reader and tempts him to click it (I’ve placed it on the right side of this page though I haven’t had much luck yet 😉 )

In the default theme, the sidebar is only 160px in width. So, lets change this to fit the 336×280 ad unit.

(a) In the firefox toolbar, click “view style information” (a part of the “web developer” extension” and click the sidebar area to view its dimensions.

(b) Open the style.css file in macromedia dreamweaver or in notepad. There are three elements that have to changed:

– change width of #primary, #secondary to 340px;

– change width of #content to 580px and

– change margin of #container to -340px.

(c) Now your sidebar width is increased to 340px while that of the content is reduced to 580px. Open sidebar.php and enter your google adsense code.

If you don’t want to reduce the width of the content div, then just increase the size of the wrapper div. A little bit of trial and error and you should arrive at a design that satisfies you.