How to create a Wordpress Template or Theme
Step One: Design your Site
I always begin with designing the site. I do it in the doctype of my choice (usually XHTML 1.0 Strict - Transitional if I must), and just make the site. I code everything out as if it were a static page. I create my banners, headers, my CSS file and colors - everything. After I do this, I validate my markup and my CSS files.
Validation is very important, especially if you’re creating a theme for distribution to the general public. If you do it at this stage, you will cut your “problem fixing” time to less than half.
I am also sure to comment a lot when I’m coding - especially in the XHTML file. There’s nothing worse than having a bunch of <div> tags at the beginning, and then a bunch at the end with even more in between - and then you don’t know which </div> tag closes what.
So, for purposes of example, we’ll use my
two column fixed-width layout. In the end, the finished code (sans actual content) will look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="global.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div> <!-- closing header div -->
<div id="content">
<div id="sidebar">
</div> <!-- closing sidebar div -->
<div id="main">
</div> <!-- closing main div -->
</div> <!-- closing content div -->
<div id="footer">
</div> <!-- closing footer div -->
</div> <!-- closing wrapper div -->
</body>
</html>
Note all of those nice comments telling you what div closes what section 
Now, the reason I do the site design/layout/coding first is because I want to be sure i have all sections in the right place, and semantically laid out. I validate so I can check for errors at this stage - like an improperly closed <div> tag that might throw the layout off. It’s best to find these errors now, before we break it apart for Wordpressing. Once you break apart the base template, these sorts of errors are difficult to find and fix if you’re not very familiar with coding.
Now that the main template is done, let’s Wordpress it!
Posted by
September 21st, 2006
it really helped me, thanks a lot, let me get started with wodpressing
Spoken on November 25th, 2007 at 11:11 am