If you’ve visited this site before, you might notice that I’m running a new theme, which I’ve named Formattd. And if you follow me on Twitter, you might have seen me hint about it in tweets and screen shots. Now, you’re looking at it. Well, technically, you’re looking at a child theme (named dougalizr) with extra bits specific to my site, but still. This is my first attempt to create a theme completely from scratch.
In the past, I’ve generally started with an existing theme, then just created a child theme to do subtle alterations specific to my site. But I got tired of wrestling with doing things the way that somebody else envisioned it, or having to work around extra layers of “framework” functionality in order to change something simple. I wanted my own theme that I would know inside and out. And let me tell you, I now have a new respect for theme authors. Building a theme is a lot of work, because there are a zillion little pieces and details to account for. If you are a developer, and you’ve never built a WordPress theme from scratch before, I highly recommend it as an exercise.
Let me start by saying that this new theme is not revolutionary. It’s not a “theme framework”. I haven’t put in any customizable options (yet, I might in the future). It’s not a “portfolio”, “news”, or “magazine” theme. It’s just a plain blogging theme. And at the time of this writing, it’s still not even complete (see the To Do section, below). But it has some features that I think are interesting and useful, and I finally got it far enough along that it was at the dogfood stage. So I’m launching it here to help expose the warts that still remain, and force me to deal with them.
Features
- All 10 post formats accounted for.
- You can have different format templates for archives views.
- When using the ‘link’ post format, the first link in the post becomes the ‘post link’. This will be used as the link for the post title, instead of the regular post permalink.
- Allows setting post format when posting via XML-RPC (such as from the WordPress apps for iPhone or BlackBerry). Just start your post with ‘:aside:’, ‘:link:’, etc. Example: :aside: It’s always fun until somebody loses an eye. But then it’s more fun, because you get to play with the eyeball.
- If a mobile post starts out with just an image before any text (as when you post an image from WordPress for iOS), it will automatically set the post format to ‘image’.
- Any mobile post that contains a gallery shortcode automatically gets the ‘gallery’ post format.
- ‘Chat’ formatted posts can automatically bold speakers’ names, if you use a pattern like this (name, colon, text):
Costello: Who’s on first? Abbott: That’s right. Costello: What? Abbott: Second base.
- Featured image support. Currently the HTML for this is hardcoded, but I plan to allow this to be overridden.
- Custom excerpt support. If a post has a custom excerpt, it will be displayed on the front page instead of the full post.
- The basic layout holds together all the way down into older versions of Internet Explorer.
- Basic iPhone layout adaptability (still needs some adjustments).
I’m pretty excited about the post format support for mobile blogging. I got tired of waiting for the WordPress for iOS app to support post formats, so I just made a way to go ahead and do it now. I think that being able to easily post images, statuses, and asides from my iPhone will encourage me to post more to my blog, whereas before I might have put much of that on Twitter. I still love Twitter, but I also love owning, controlling, and centralizing my content.
To Do
There is still a lot left to do: The orange that you currently see is temporary. I want to add some nice typography. The sidebar and footer are still ugly as sin and need styling. I need to put the hAtom microformat classes in. It still needs mobile-specific styles. There are still areas that need better HTML5 semantics. I still need to create several standard templates, such as search, page, and 404.
Credit Where Credit Is Due
When I say I built this theme “from scratch”, that doesn’t mean that every byte of HTML, CSS, PHP, and JavaScript sprung forth fully formed from my mind to my keyboard, as Athena from the forehead of Zeus. Far from it — I stand on the shoulders of giants, borrowing liberally from the work of others. Some of what you see here was inspired by:
- HTML5 Boilerplate and Initializr
- Matthew James Taylor’s Perfect ‘Right-Menu’ 2-Column Liquid Layout
- The TwentyTen theme
- Nicolas Gallagher’s CSS Drop Shadow demo
- Chris Coyer’s Simple jQuery Dropdown menus
- Design Festival’s Typography of Quotations & Citations
- …and probably many others that I can’t think of right now…
I want to spend a few days working out some of the kinks here, but then I plan to make the source available. I’ve put it up on GitHub (Formattd on GitHub) for now, to give anyone interested a chance to offer feedback and patches. Once it’s cleaned up enough, I’ll submit it for inclusion in the official WordPress.org theme repository.
With that said — feedback welcome!
