Designing a wordpress theme from scratch (Part One)

Designing for wordpress isn’t really all that different from designing any other website, yet it seems to be that its not something that gets approached as creatively, or is given as much thought as traditional web design.

Yes it’s true wordpress has some limitations, but on the whole its a great tool that’s simple to use and you can still be really creative with it.

In the first part of this series of tutorials I’ll be looking at how to structure your design composition in a way that makes it easier to code into xhtml/css.

I’ll also look at basic semantic mark-up and using css to degrade your site nicely into older browsers.

The final layout for this part of the tutorial is viewable here.

Later on we will split this design up and turn it into a wordpress theme.

First Things First…

Credit where its due. A few of the techniques I employ in my site design have been taken from Jon Hicks and in particular his talk at FOWD which you can view here.

The final layout for this part of the tutorial you can see here.

You can download the original files for this tutorial here if you wish.

You can also grab my base template (which we will cover using in the next paragraph) here

Feel free to play around with all the files ’til your hearts content, that’s always a good way to learn and you can always grab a fresh copy and start over.

Setting up a template system makes your life easy

First thing I do is make a copy of my base template (which has several folders, one for images, one for css, one for javascript, one for library (which will hold any extra scripts like jquery plugins etc…), a dev folder for all photoshop files etc.. and an index.html page + several stylesheets, all of which contain helpful snippets and basic markup) and rename the parent folder to the project name

You can download my base template here if you wish.

Now we are ready to begin

Design First Steps - Basic Layout & Structure

When you design your site, in whichever graphics program you use, ultimately you’ll make most of your decisions on layout at this stage.

Each project requires it’s own decisions to be made on where the navigation goes, how many sidebars you have, if its fixed or fluid width etc… ultimately it depends on what you are aiming for.

I’m not going to cover ‘how to design a website’ as everyone has their own style. What I will say is useful however is to write down your hex colour codes and column widths (either in a comment portion in you css file or on actual paper). These come in really handy later on. If you’re like me and sometimes you just can’t get colours gelling, http://kuler.adobe.com/ is great for a helping hand.

Once I have the design down, I have sliced out the images to my images folder and written down my hex codes and column widths, I start marking up the comp with really basic structure as follows (I actually print it out and write on it but for the purposes of this tutorial I’ve done it in photoshop).

This provides me with a quick idea of how I’m going to mark up the site as well as giving me a visual flow to follow.

Now the more observant among you will notice that the site doesn’t look exactly like that. This is because when it came to marking up the site into xhtml later on I made a two decisions.

1. I wanted the navigation higher up in the html as in this design it was in the sidebar and as a result, half way down in the mark up which is not great for site structure. I could have solved this by floating it next to the logo at the top of the page but…

2. I added the second sidebar which made me want the site to fold together if it was viewed in a smaller resolution. As a result I wanted the navigation to be high up in the document, even if the site was viewed at a really small resolution. Having it floated next to the logo would make it fold underneath but retain its small width which wasn’t ideal.

I always think its worth following your gut on these things and not sticking so rigidly to your comp. I feel the site is better for the slight changes I made to the layout and if it hadn’t worked I could have always fallen back on my initial idea.

Getting into the code - Setting up your style sheets for the best cross browser performance

I’ve used Jon’s method for this as I find it really robust.

What we have in the <head> portion of the page is one linked, one imported, one print and two IE specific stylesheet.

1. The basic stylesheet

This is linked into the document using <link href>

As older browsers don’t understand @import this is the stylesheet those browsers will find. All this stylesheet does is style the page in a simple way and let the user know politely that their browser is a bit old now.

2. The main stylesheet

This is brought into the document using @import"css/style.css"/**/;

The /**/; at the end bypasses IE browsers older than IE6 as they don’t understand it, which means anything older than IE6 will be passed the basic stylesheet.

The main stylesheet also has two @imports for typography and a reset stylesheet.

The reset stylesheet resets browsers to their default styling and then adds some sensible defaults.

The typography stylesheet controls the basic type styles for the site.

3. IE 7 only stylesheet which holds all the styles for that browser.

In this stylesheet I also use @import to import the IE6 stylesheet as IE7 shares a lot of the same problems as IE6 and its a bit daft to write them out twice. If an IE7 element needs styling differently from both the main stylesheet and the IE6 stylesheet, this is where we put those styles.

Below is an example of what I mean.

4. IE6 only stylesheet which holds styles for IE6.

This stylesheet holds all the styles for IE6. Where I don’t want an element to be shared with the IE7 stylesheet I use the *html hack (see example below). This way IE6 can share elements with IE7 and also have styles just for itself.

Phew, that was fairly intense!…

Getting into the code - Basic layout mark-up

Once we have our template set up and images ready to go all that’s left is to start marking up. I’ll go much further into this in my next tutorial but lets get the basic principles down now. (Note that this is my way of doing it, you might have a different approach and that’s cool. If you find this way helpful in any way then great).

Use classes for most layout elements. This not only means you can re-use certain elements throughout the page, but you can build up multiple classes on certain elements to vary styling. I only use ID’s when dealing with javascript, anchors or flash content.

Use a wrapper to contain the site. This gives you greater control of where and how the whole site is positioned. This way if you decide you want to move it all to center alignment for example you can very easily.

Use <h1> for you blog title/logo and all your blog post titles. These tags are really important for SEO so this just makes sense.

Use lists for lists & paragraphs for paragraphs. Semantically its correct and it helps you identify what’s what quickly.

Ban the <br/>. I’m not talking in posts but in layouts. You can break things apart using margins and padding in css.

Cut down on images in the html layout. If you can use background images or replace text with images via css (i.e for the logo, buttons etc…) then do. A good marker is, if you can switch off your stylesheet and see a nicely structured text document with few layout related images, your on the right lines.

That about wraps it up for part one. In the second tutorial I will look at building the site in more detail and cover some css techniques for taking the design to the next level.