From time to time, I get questions about how I start designing websites, and how I build custom WordPress themes for my clients. I’ve spent the better part of the last year trying to streamline the process of designing and launching a blog theme. The problem that I have is I tend to get a little carried away with trying to be perfect. Like most designers I start out with the basic tools…pencil and paper. I draw out the layout and figure out the basic positioning of all of the necessary elements before I even think about putting anything down in Photoshop. That drawing stays with me until the very end of the project, and sometimes even after just for reference.
How Does GrandmasterB Layout a Site for WordPress?
Recently, Forest from The Random Forest and Frugal Zeitgeist hit me up on Google Chat to ask me how I build a Wordpress theme and how I go from Photoshop layout to coding everything for Wordpress. Well, I know that I’m not the only designer/developer that works this way, but I build a simple HTML/CSS file that will serve as a template for the coding of the WordPress theme. In my opinion, there’s no reason to mess with all of the WordPress options and variables unless you have already solidified the design in it’s simplest form. I break down the design into the most simplest elements first:
- Content Area
- Left Column
- Right Column
- Any other Columns
In my experience, 99.95% of the websites you visit will be comprised of those elements. I have built a basic HTML layout and copied it over to a Clip in Coda that I can use for every new site and add or subtract items as needed. If you don’t use Coda, you can still make a template file to copy and paste whenever you need. Below is the basic structure of the file that I use…minus the standard HTML code.
Basic HTML Layout
<div id="wrapper"> <!-- wraps everything into one div tag -->
<div id="content-area"> <!-- houses the columns -->
I know it looks simple, but that’s the idea…and it is simple! If you were to populate your divs with some content they will all just be stacked on top of each other. All of the detail like column heights, widths and position are determined by CSS. I had contemplated writing my own HTML/CSS layout tutorial, but that has been done a hundred times and there’s no sense in reinventing the wheel. One of the better tutorials that I have found was written by Steve Dennis on Subcide.com. It’s a very good tutorial, easy to follow and has great graphic examples to follow along with.