My WordPress Theme Design Process

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!

Posted May 24, 2007 by Nathan Rice | Filed Under Blog 

Comments

7 Responses to “My WordPress Theme Design Process”

  1. Brian Gardner on May 24th, 2007 2:49 pm

    Great fundamental post about your process Nathan – I’m sure this is something that will be helpful to those who are new to Wordpress theme design!

  2. Dana on May 25th, 2007 1:05 pm

    It’s nice to know that I’m not the only designer who can’t draw a straight line to save their life. :-)

    Thank goodness for the SHIFT button :-)

  3. Web Usability » U-G-L-Y - I Actually Got an Alibi on June 27th, 2007 6:54 am

    [...] too much on the subject (a testament of poor Google skills?) but I did run into a brief post about Nathan Rice’s Wordpress Theme Design Process. Might be useful to someone, was a little bit on the light side for [...]

  4. Jeremy on August 6th, 2007 12:51 am

    Nathan,

    I love your work. What theme did you use for this site? I love the static homepage and the separate blog section. I am trying to do something similar this weekend and haven’t had too much success but I haven’t given up hope yet.

    Keep up the great work.

    Cheers!

  5. Visitor352 on August 12th, 2007 1:12 pm

    I have visited your site 268-times

  6. Vqniuala on August 29th, 2007 3:45 pm

    Thank you for your site.
    halibut fishing+ charter seward alaska halibut fishing+ charter seward alaska

  7. MyDeskBlog.com on September 1st, 2007 4:19 am

    Designing a new Wordpress template from scratch is something I’ve been wanting to do. It takes a lot of time and effort though. It took me almost a week to design my site. Well, it’s not really a design, as you can see its kinda barebone. I used the original WP template and modify it.

    Your process of designing and planning before coding the markup sounds good. I’ll keep that in mind.

Leave a Reply

You must be logged in to post a comment.