Getting Started Designing Tumblr Themes

Getting Started Designing Tumblr Themes

I was recently asked to convert one of my existing original WordPress themes to a Tumblr theme. As far as I know, there is no quick and easy way to do this- and comparing the WordPress template tags and the Tumblr theme code convinced me of one thing: I was going to have to rebuild the theme from scratch.

At first, the task seemed daunting. Tumblr’s variables- from “block”s to “PortraitURL”s- were completely alien to me. Then I thought back to when I first looked at WordPress code, how confused I was at the time, and how comfortable I am with it today.

And just like that- no more fear! Tumblr’s code was just something I’d just have to learn.

It’s important to know exactly what you can do with a Tumblr theme, and one of the best ways to do this is to look through their official theme repository. Each theme listed here has a Preview button, so you can get a feel of how it works at a generic level.

Start your own Tumblr blog.

If you don’t have a Tumblr blog already, I strongly suggest signing up for one (it’s free). You can use this for testing, and who knows- you might just like it enough to use it “for real”.

Download existing Tumblr themes to take apart.

It’s how most of us got started coding in the first place: take something existing, take it apart, and study how it works. It isn’t possible to download themes at the Theme Garden, but there are some generous souls out there who have made their custom themes available for download. Check out DigitalThom, Franklin Street, or Munich.

Make your Tumblr theme customizable.

Everybody wants options, and it’s actually quite simple to enable customization in a Tumblr theme. For example, adding the {CustomCSS} variable will allow users of your theme to do some visual tweaking without having to touch your markup. For more ways to add customization options, see the guide on Tumblr.