WordPress custom theme design

Browser screenshot

Editing a WordPress theme could be easier than you thought. You can change the default theme without having to edit any php file.  All you’ll need to edit are some images and the CSS file. And believe me, basic things aren’t that difficult in CSS.

A first step in the design of our new template is to copy the default theme, make some changes and activate it.

• Go to “/wp-content/themes/” and copy the folder “default” to a new folder and give it a new name. I called it “techible”.
• Browse into the new folder and open the file “style.css”
• Change the “Theme Name” to make it easier to distinguish your theme from the default.
• In the admin panel of your WordPress installation go to Design-Theme.
• Activate your new theme.

Ok, now your theme is activated and you can start changing the design. Before you start editing the layout you can pick some colors to use in your theme. I’ll go with this palette:

Color scheme

I prefer Adobe Fireworks CS3 for image editing, but you can use any editor. To make things easier I made one Fireworks file with the complete design. To split it up to images for the theme you can use slices. At the bottom of this post you can download my custom theme with the Fireworks source file.

This is what the custom WordPress design looks like in Adobe Fireworks:

Theme layout in Adobe Fireworks

After the design is ready and you have your custom images for the theme you have to edit the style.css file. All I did in this file was change some margins and colors. Every time you change something in the css file you should check the result in Mozilla Firefox and in MS Internet Explorer. If you make too many changes before checking the results things can get confusing.

A useful trick I use while editing css files is giving elements a red border while changing the margins and paddings. This makes it easy to locate them.

Since the new header image I made has to touch the upper border of the browser I had to change the body margin and padding to zero:

Easy, not?

Next I changed some colors. To find the RGB codes you can use the color picker of your image editor. Some colors are available by name in css:

W3schools has a nice list of colors.

And this is how the final WordPress theme looks like in my browser:

Browser screenshot

You can download this WordPress theme including the Fireworks source using the link below. Just install it by unpacking it in your themes directory.

techible.zip

Happy editing!