making your own WordPress theme part 1

I recently made my own WordPress theme, called Winterbird, for this site. I thought I’d run down the resources I used and outline my process.

Allow plenty of time. It took me about 15 hours to get Winterbird looking and functioning pretty much like I wanted, and I’ve had a lot of practice tweaking other people’s themes. Your mileage may vary greatly, depending on what you want your theme to look like and do.

Basic requirements

You’ll need web hosting, preferably with a control panel that will install WordPress for you, so you don’t have to install it manually. You’ll also want an FTP program for transferring files between your computer and your site. I use Transmit, but Cyberduck and Filezilla are fine free alternatives for Mac and Windows, respectively.

Your site architecture

Plan your site. What kind of content, whether text, images, audio, or video, will you publish? How do you want to organize it and present it? Are there any special features you want, beyond what the standard blog does? Make a list of the different pages you want. Here are the pages on a typical WordPress site:

• Site home page
• Blog front page (may or may not be the same as the site home)
• Single post page
• About page
• Contact page
• Archives page

In my case, besides these standard pages, I wanted a special page for my music search engine, so I added it to my list.

You don’t have to think of your site as merely or purely a blog. Try to think outside the “blog” box when you’re dreaming up your site.

Okay, now get out your Photoshop, or your pencil and pad, or your lump of charcoal and flat rock, whatever you’ve got. Sketch or mock up the different layouts you want for your pages. Keep in mind you’ll either have to figure out—or copy from other themes—how to code the positioning of each layout with CSS. If you’re a CSS newbie, you may want to avoid very complex layouts.

If you don’t have much confidence in your coding skills, don’t worry. It just means you may have to copy someone else’s layout instead of doing the fancy page you wanted with umpteen columns. I’ll refer you to a good tutorial later on in the next article of this series.

Making it pretty

I’m not an artist, so I tracked down some help on the wild wacky Web. Here are some ways you can add prettiness to your site.

Choose a color palette that appeals to you. There are many sites where very artistic people post the color combinations they’ve dreamed up. I used winter bird from kuler. Of course, you’ll have to decide where to use each color on your site, but having a beautiful set of hues will inspire you.

Find a free or inexpensive font with a distinctive look, and use it to make a personable graphic displaying the name of your site. I used Sybil Green, a free font from MyFonts.

Using a color or colors from your palette, make a background pattern at bgpatterns.com. You can use it to decorate parts of your site. I used my pattern in the background of my site header and footer.

If you took a photo you’d like to use, say, in your site header, but you’re not the world’s greatest photographer, upload it to Picnik (hat tip to Mike) and apply so many farout effects, no one will ever detect your lack of skill with the camera.

Browse others’ photos under the Creative Commons license and find one you can use under its licensing terms. Make sure you give credit and link back to the photographer’s page.

Lastly, if you want to make sure your web pages load zippily in your visitor’s browser, optimize your gorgeous graphics for the web. Their resolution should be no more than 72 dpi, and their quality should be just high enough to make them look good enough. Then run those optimized graphics through smush.it to squeeze them down as skinny as they can be.

Okay, good work. You’ve got the vision. Next article, we get all nuts and boltsy.