Designing and Coding a Wordpress Theme From Scratch (Part 2)
Designing your first Wordpress theme may seem incredibly ambitious at first but it’s really not that hard. It may help your understanding of Wordpress if you find a theme you like and disect or remix it. This is how I learned to code and one of my first attempt was a variation of Derek Punsalan’s theme The Unstandard.In Part 1 I talked a bit about the tools you’ll need and how to get prepared. Now that you’ve done that we’re going to get started.
Layout and Structure
This post by 37 Signals is an incredibly detailed account of how to organize information and using sketches to design for the web. I highly recommend taking a break to read it. As mentioned in the post sketching out the general layout of your site will help you. For my design I started with this sketch:
Let’s compare the sketch to the finished theme:
As you can see my marked up design remains fundamentally similar to the original concept sketch.
Designing WordPress Themes in Photoshop
We’ve got our sketch, lets open up Photoshop and start designing. Since every design is different, I won’t bother explaining every single choice I made, instead I’m going to give you some tips on laying out your design so that it can be successfully marked up for the web.
- 1. Work to a grid. I don’t necessarily mean the grid that you get when you type Command+’ but rather working to a structurally sound grid that corresponds to the golden ratio or the rule of thirds. This is because Photoshop has to ’slice’ your resulting design into rectangles and if you keep it in mind while you design, that can be done easily at the end.
- 2. The fewer the slices the better. So when you finish your design you’ll slice it into sectors that will then be marked up to xhtml and subsequently php to create your theme. This the last thing you want is a 100 different areas to code separately. If you study the image below you’ll see that I had about 16 ’sliced areas’.
Try not to have more than 20. Why? Because each of these slices are images that have to be downloaded and displayed when someone visits your website. The more images, the slower the load time will be for people with slower connections. Although in Part 5 I’ll show you how to optimize your image based website for speed, it’s better practice to have fewer slices.
- 3. Make each content area it’s own slice. I can’t stress how important this is! For someone new to XHTML it can be incredibly hard to figure out how to float < div > tags so that content areas remain separate. The laymans solution? Don’t bother! If all your content is contained in < div > ’s for a specific image or ’slice’ you won’t have to.
Another reason to do this is that if you have a content area that is divided into slices that cut up the content space, you’re going to have a much harder time trying to make the content display correctly over two background images.
- 4. Work in color proof mode. When I’m designing for the web I’ve learned to work entirely, start to finish, in color proof mode (command+Y for Mac / control+y for Pc). This is because colors in Photoshop can be deceiving and if you aren’t using websafe colors, you need to make sure everything translates as you want it to. I explained this in more detail in a previous article here.
- 5. Think in 3D.Your design should not be thought of as a flat surface. It has depth and the things that are different elevations should be treated the same. For instance, if you have text or images ontop of content areas in your design, you may want to call on them in the stylesheet instead of leaving ‘flat’ as part of the background images. Thus all stylized text like your header text or social bookmarking links should be images that are displayed with CSS. This is the second and topmost layer of your design with the layout existing below
In the above picture you can see that I worked to a grid that I created using guides. As my design progressed, the grid got incredibly convoluted but these lines correspond in some way to the layout and skeleton of the site. I’d say this is even more important for minimal designs like my own.
Got all that? Let’s move on to Part 3 – Photoshop to XHTML in 24 Hours!
Tags: code, Design, photoshop, theme, tutorial, web dev, wordpress
April 30th, 2008 at 4:08 pm
Thanks for linking to my post on the Rule of Thirds in web design. Looks like a great series that you’ve got here. Now to go read through it all.
June 2nd, 2008 at 11:22 am
you seem to skip a huge part by assuming that people know what you mean by splicing up the image you created in photoshop. i don’t even know what splicing up an image means, let alone doing it to my image, especially for each “content area” of my image and not to mention how to know what to slice in the first place… you say you’re not going to go into detail because every design is different, but i think it would beneficial in a tuturial to show what you did and how you did it to get a .html document that you refer to in the rest of the tutorial. i have no idea how you got from having an image in photoshop to having a .html file from which to create the .css file… the way it is now, you just all of a sudden have an .html file without telling how to actually GET that.
June 3rd, 2008 at 11:54 am
Emjay – Fair enough. I may expand upon this post this month, especially since you aren’t the first person to make this critique.
August 16th, 2008 at 1:04 pm
Great tutorial so far, only thing I am wondering, is if it’s accessible in a PDF file like the tutorials over at WPDesigner, Let me know man.