How to Customize the Default Wordpress Theme

Do you know what you want your wordpress site to look like, but don’t have the programming know-how to make it happen? Here is an easy way to take an existing template and change the graphics (header, background image, etc.) to fit your needs.

Difficulty: Moderately Easy

Instructions

Things You'll Need:

• computer
• self-hosted wordpress blog
• graphic editing program of some sort

1. 

   For this tutorial, I used the default WP theme and Paint Shop Pro 7 to edit the images. The images should be located in wordpress > wp_content > themes > default > images. I suggest you make a copy of the whole “default” folder, and work with the copy of default, so you can get back to the original files if need be. Open four files: "kubrickheader.jpg" "kubrickbgcolor.jpg" "kubrickbgwide.jpg" "kubrickfooter.jpg"

2. 

   First of all, I got rid of the blue rectangle on the header image (in psp I used the magic wand tool to select and delete all of the blue area). Then I opened the image file I want to use to make the new header: a J. W. Waterhouse painting.

3. 

   Next, I promoted the header image to a layer, and again using the magic wand tool, deleted the white area of the header. I resized the Waterhouse image file so that the picture would fit in the original header file.

4. 

   I resized the original header file (760x300) so that more of the picture would show. Next, I pasted the Waterhouse image in the header as a new layer and moved it to the bottom. You can skip right to step 7 if you’re happy with only a customized header.

5. 

   I didn’t want the background to be gray, so I chose the red of Miranda’s sleeves, selected the gray areas with the magic wand, then flood filled them with a slightly transparent layer of red.

6. 

   Tweaking the header and footer a bit more. I faded the lower edge of the header image to white and added some text. For the footer, I selected the waves to the left of Miranda, then pasted three copies of the selected area into the footer. (I needed three sections to fill in the length of the footer: left, middle, and a mirror image for the right.) Save your images in copy of default > images.

7. 

   Since I made the header taller, I need to change the image dimensions in the style sheet. I opened style.css, searched for the header section, and changed the height from 200px to 300px.

8. 

   I uploaded the new template folder (which I named “Miranda”) to /wp-content/themes. On the WP dashboard, I went to design > themes and chose my new theme. Next I went to design > header and image color and clicked advanced > toggle text display so that the name of my blog wouldn’t display over the header image. That’s it!

Tips & Warnings

• When you look at WP templates, look at the design and layout--remember that you can change the graphics with these easy steps!
• This tutorial is for a version of wordpress that you host yourself, not the free yourname.wordpress.com blogs.

Resources

• wordpress.org
• Paint Shop Pro free trial
• wordpress blog templates

[Lucifera]

on 1/4/2009 Is it possible to get a link to you blog so we can see it?