Codeable info

My WordPress Theme Design Process

Posted on by in Blog

Everybody probably has a different process that they go through to get their theme working properly. Here’s mine.

I normally start with graphing paper. I can’t draw straight lines to save my life, and even the graphing paper can’t make it perfect, but at least it keeps track of spacing :-) I normally draw the layout (no colors) and label my divs.

Once the layout is drawn, and my divs are named and listed (with a description), I open up an html template file with the CSS embedded. Depending on whether or not the design needs it, I’ll use Photoshop to get the colors and layout right. I chop the image up and upload the images to the test server (or use them locally).

Then, I go to work on the markup. I add my divs, add filler content, and start styling the design. Once the design is styled and looks good, I cut it up and paste it into the WP theme template files. When the file is cut up into the different template files, I cut and paste the CSS into the style.css file.

Then, I start adding and editing the WordPress functions to the template files to get them calling the correct stuff. Since I already have everything styled, this is a very easy step, especially if you’re familiar with the WP functions.

Finally, I activate the theme, do the final tweaks, style the comments, validate, etc., and zip it up.

Sound easy? It isn’t :-)

Happy Coding!

Comments Closed

Codeable info