openswitch

You may be wondering why I’m writing yet another tutorial on how to make a tumblog. The explanation is that I think the easiest way by far to roll your own tumblog with WordPress is by using Sandbox as your base. Creating a tumblog with Sandbox requires no PHP hackery as it is fully possible with only a basic knowledge of CSS.

*Note that this tutorial is going to be very similar to my previous one except for the fact that we’re not hacking the index.php file.

Step #1: Create your categories

A WordPress tumblog uses categories to display posts differently throughout the blog. On openswitch I have eight categories total. They are Journal, Conversation, Photo, Podcast, Quote, Thought, URL and Video. Before I went to a tumblog style I had something like thirty categories which I was using to categorize my posts by topic. With a tumblog, however, the categories are not going to be used to differentiate posts based on topic. Instead they will be used to differentiate the posts based on type. As you can see from this site, when I publish a post in the “article” category it gets styled differently than when I publish a post in the “url” category. This is what I’m talking about. And Sandbox makes it very easy. But first, just create your categories. Mine are: article, chat, image, quote, thought, url.

Step #2: Style your categories

This is the last step. Simple, right? See, when you look at my source code for openswitch you’ll see that every post is contained with in a <div> that has several classes applied to it. For instance, when I publish a post in the “url” category it is contained in a div that looks like this:

<div id="post-1977" class="hentry p3 post publish author-ben category-url tag- y2008 m01 d09 h12">
CONTENT GOES HERE . . .
</div>

So to style it I could use some CSS like this:

div.category-url {}

And don’t forget that you can get more specific and control any HTML element within this div by using child selectors:

div.category-url h2.entry-title a {}

And that’s it. When I made this theme I did a lot of looking at my own source code. I had to because Sandbox autogenerates a lot of really great semantic classes that are only visible in the source code.

Questions? Ask away