cre8d 2.0 theme: going from drawing to code structure

April 3, 2006

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.)

See also
Comments

  1. this is great. more basic css tips would be great and stuff!

    cant wait for the next one.

    — drazin, April 4, 2006

  2. Learn by example. Thanks for having this nice idea.

    Will be following the next steps.

    — Alex, April 4, 2006

  3. i’ve been using notepad++ for over a year now. one of if not the best notepad replacement and coding tool on windows. syntax highlighting is superb and the ability to designate what type of file you’re working on doesn’t hurt either.

    great idea on the write-up. while i to take the time to sketch out what i have in mind. it definitely helps to get the initial margins, paddings, and widths layed out before opening up notepad++ and coding.

    — derek punsalan, April 4, 2006

  4. Not seen Notepad++, use Notepad2 myself for quick jobs. For lengthier jobs I still use HomeSite. Can’t find anything that beats it.

    — Gordon, April 5, 2006

  5. I used to obsess over making my pages xhtml compliant. Unfortunately I have found that some plugins threw that off and eventually I get thrown off. This is a struggle; hopefully I can get back to transitional soon as I am feeling my way along.

    One excellent way to use the xhtml validator is for figuring out errors in your site as well as others. I would occasisionally provide help in the wordpress support forums and a lot of people go there with a “can you look at might site because it just doesn’t work anymore� question. Columns don’t line up, etc. The validator often pointed me to the problem.

    The validator will allow you to point anyone’s site at it and breakdown all kinds of errors. It is a great tool. If only it would ferret out differences between Internet Explorer and Firefox!

    — Trip, April 8, 2006

  6. [...] This post is part of an ongoing series into how to make a Wordpress theme. You might like to read the previous post first. [...]

    — cre8d 2.0 theme: adding in some layout and styling &mdash; cre8d design blog, April 12, 2006

  7. [...] Take a look at the first entry here. [...]

    — Thatedeguy &#187; XHTML Tutorial, April 13, 2006

  8. try crimson editor. customizable syntax coloring (a bit puzzling at first, and limited in ways, but nice). has glitches that will likely never be fixed. eg, drag to other pane appears to create a copy, not a move. also drag seems to shove text before it “lands” which drops the dragged text in unintended location. sometimes instead, i drag to end of a line then redrag to intended location, but plain old cut’n'paste is always reliable.

    — splib, April 16, 2006

  9. http://www.ringtones-dir.com/get/ ringtones site free. [URL=http://www.ringtones-dir.com]ringtones download[/URL]: ringtones site, Free nokia ringtones here, Download ringtones FREE. [url=http://www.ringtones-dir.com]samsung ringtones[/url] From website .

    — ringtones free, August 27, 2006

  10. http://www.ringtones-dir.com/get/ ringtones site free. ringtones site, Free nokia ringtones here, Download ringtones FREE. From website .

    — ringtones free, August 27, 2006

  11. The “step1.html” link is dead :-(

    — Dan100, August 30, 2006

  12. Ah, it’s supposed to be blank, isn’t it? :-)

    — Dan100, August 30, 2006