In this post, we’ll take that initial design idea and turn it into an XHTML template.
Lately I’ve been using some nice free software to code up my sites in. It’s called Notepad++. I gave up using Dreamweaver a long time ago – it is so easy to produce poor-quality code in Dreamweaver and I find it really slow and cumbersome to use.
I prefer to code up my sites by hand and Notepad++ is better than Notepad in many ways – it has tabs and color-codes tags and makes it easy to collapse down code while you’re working on it.
First step is to start off with a really basic template and worry about nice meta tags, RSS feeds, WordPress code, and even CSS later. View the source of that to see how basic I’m starting off with.
Note: There’s one line of code you’ll find in all my template’s code which you should ignore – it’s my stats package, Mint:
<script src="/mint/?js" type="text/javascript"></script>
Next step is to figure out the structure of the template. I may change my mind later about the tags I’ve used or the order of things when I tweak things later (especially the header tags). I’ve put in the sample data seen in the original design, just so I can see how the structured content looks too. And there we have Step 2.
I check to see if the code validates.
It’s actually a good idea to see how nice your page looks without any styling. This is how people will see your site if they don’t have stylesheets enabled. Your site should still look organised – the structure should still be obvious to people.
Tip: How do you know whether to use id or class? If the style you’ll set up later appears more than once on a page (potentially), then use class. If it will only appear once, use id.
Next step: figure out the CSS to get the layout working!
(PS: When I’m coding up a theme myself, I’ll usually have WordPress code in there right from the start but I think it’s adding unnecessary complications too early on for this tutorial series.)