Chapter 2. Theme Design and Approach

Welcome to this chapter on theme design and approach. My hope for this chapter is that even you design pros may discover interesting tidbits that will help you in your WordPress theme design creation. The purpose of this chapter is to help you create a working XHTML and CSS-based mockup, with a view to having it end up being a WordPress theme while staying compliant with W3C standards and table-less CSS layout techniques.

Theme design is essentially web design and, throughout the chapter, we'll be focusing a bit more on thinking about standards and compliance first. The first part of the approach will cover what we want to design for (keeping in mind it will end up in WordPress) and the second half will focus more on creating a design that is made with the content in mind.

This approach will give us a more flexible, yet solid XHTML and CSS structure. We'll then be able to enhance and embellish that structure with great visual design. The more "standard" approach most of us are familiar with makes us create a purely visual design first and then jump through hoops to create XHTML and CSS to support that design. We then attempt to fit content into the design, often causing a few more glitches along the way. This approach often creates less-than-ideal markup and the need for hacks and fixes, just to get the design to hold up across all browsers and varying types of content.

While you might find this approach a little strange at first, it's by no means set in stone as the only right way to design! Simply read through the chapter and, even if you already have a polished Photoshop or GIMP mockup, go ahead and try to set up your XHTML and CSS mockup using the steps laid out in this chapter. You may find it helps your process.

In this chapter, we're going to take a look at:

By the end of this chapter, you'll have a working XHTML-and CSS-based "comp" or mockup of your WordPress theme's design, ready to be coded up and assembled into a fully functional WordPress theme.