In this post, I’ll run through the high level steps I went through to get the basics of this site up and running, including detailed code snippets along the way. I’m assuming the reader has some familiarity with XHTML and CSS, so I won’t dive too deep into the details; there are plenty of tutorials and documentation out on the web for that.

If you’d like to look at my final theme as reference while reading through this post, you can download a snapshot below.

hackrunner.theme.tar
hackrunner.theme.zip

Overview

Before getting my first post out on my live blog, I wanted my own custom theme for WordPress. I’m not a UI designer and normally don’t focus a lot of my efforts on creating flashy themes, so I wanted to keep my theme simple. That being said, I had a couple requirements in mind when I was creating my theme.

• The site should have a simple navigable layout, relying on the WordPress defaults where it makes sense.
• The site should allow for quick navigation of posts, pages, and different types of archives (monthly, categorical, search, etc.)
• The site should favor CSS for most visual styling. Images should be kept to a minimum.
• The site should have a colorful and usable color scheme.
• The site should use a CSS layout framework.

For anyone following along, I’d highly recommend reading through the Theme Development Documentation and Template Tags sections of the WordPress Codex.  Between the two, you’ll find just about any information you’d need when creating a theme, and it will fill in a lot of the gaps my post doesn’t cover.