getting Started: customizing a WordPress theme

The tutorial assumes that you have some basic knowledge of html and css. The steps outlined for css customization will work whether you are using WordPress.com or your own hosted version of WordPress. For beginners, it’s best to use a theme with the layout that you like as a starting point and then customize the colors, fonts, and other attributes, instead of trying to modify the layout of your theme.

Finding your css

For WordPress.com, you will need to “upgrade” your account for the ability to edit your stylesheet, you may do so my selecting “design” on your dashboard, then “edit css”, and then selecting the “Custom CSS Upgrade”.
For self-hosted WordPress, from “Presentation” tab you will be able to edit all of your files, look for the one ending in “.css”, this is the one we need to edit.

Before you start editing your css, save a backup copy of it, and save and test every change that you make, just to be on the safe side – if you don’t like a change that you make, it will be easy to erase it.

If you are not familiar with css, it may be helpful to read this beginner CSS guide before continuing with this tutorial.

Changing colors

The most simple changes you can make to your template to customize it is to change the colors.

Within your css, they key things that you want to look for are “selectors” (the names of each section – on the left, example body) that contain attributes starting with ‘background’, ‘color’, or ‘border’ – most likely these will contain some color information for your template. Color within a css will look like ‘#fff’ or ‘#f0f0f0’ – a 3 or 6 letter/number (it is a hex number – the 3 digit format is shorthand) combination that is preceded by a ‘#’ sign. You can use this color schemer resource to find the codes that match any color that you want to use.

The color schemer will also give you some color scheme suggestions based on whatever primary color that you choose, making it easier for you to coordinate the colors that you use for different elements within your template.

The best way to get comfortable with making changes is to just experiment – I suggest that you look for colors within you css, change them, and then test you template to see how the new colors look.

Changing images

The template background is usually embedded into ‘body > background’ within you css.

Option 1 – if you want the easiest way to replace the image, ensure that your replacement image has the same dimensions and filename of the original and that will overwrite the one that is there

Option 2 – if you do not want to use any images, and instead just want a solid color, you can just erase the image:

background:#e6e6e6 url(images/bodybg.png) repeat-x; will become background:#e6e6e6;

Option 3 – if you have a file that is hosted elsewhere (most likely if you are using WordPress.com), you need to put in the full url to the new image:

background:#e6e6e6 url(http ://farm2.static.flickr.com/1280/filename.jpg?v=0 repeat-x);

Changing Fonts

You may change the fonts within you template, but since everyone who visits your website may not have the same fonts installed on their computer, you will need to stick to simple, common fonts. But by changing the font size, font color, font weight, line height, and letter spacing, (refer to css reference for a full list of attributes) you will be able to get a different look for your template.

For example:

appears as:

And making slight changes:

Results in:

Other changes

If you are not able to create your own graphics, you can easily modify borders and backgrounds in creative ways to obtain a great looking template without the use of much graphics. Using other websites as inspiration is a good way to get some great ideas for your own theme.

Remember to experiment and have fun!