Things to Know About Custom Tumblr Theme Design

Zach Dunn on April 26th, 2010 Posted in Tutorials

Tumblr has done a lot of growing over the past few years. Recently I’ve had to develop a few themes inside of Tumblr for part of a larger overall campaign. Coming from WordPress, I appreciated the platform’s simplicity, but wasn’t sure about how customizable it would actually be. I was under the impression that custom theme design was a lot more complicated than it actually is.

This post goes over a few of the basic questions that I’ve come across in starting with custom theme development for Tumblr blogs. It’s not a definitive list, but should help get you moving the first time through.

Tumblr is not a typical content management system. It’s a simple way to put categorized types of information online in blog format. You will probably not be able to teach your theme new tricks by expanding the API. The focus is on rearranging the blog’s content using basic HTML and CSS, just like the CSS Zen Garden project started years back.

You can still customize, just within the limits of basic check boxes, text inputs, and color swatches. If you think about it, that’s really all you need.

Where Do My Images Go?

Unless you’re a typography purist, you’ll probably use a few images in theme design. In the past, posting images to “closed” systems had involved an upload to a third-party (e.g. Image Shack) and then linking images that way. As it turns out, you don’t have to host your own theme files. Tumblr offers a static file uploader for use with custom themes. Just make sure to respect the uploader, and keep it limited to theme assets only. If you turn it into a personal dumping ground, your account can get banned.

Build in Blocks

Content types break down into blocks. You can specify a photo post using Block:Photo and a quote using Block:Quote. Your theme’s HTML is really just a single page with all possible options on it. When a visitor loads the page, the content displays according to the structure defined by its block. All post types are encapsulated by the {block:Posts} tag.

A Sample Block

<div id="wrapper">
	<!-- Start of Post Type Blocks -->
	{block:Posts}

		<!-- Sample Quote Block -->
		{block:Quote}
			<div class="quote">
				{Quote}
				{block:Source}
		 			<span class="source">{Source}</span>
				{/block:Source}
			</div>
		{/block:Quote}

		<!-- Sample Photo Block -->
		{block:Photo}
			<div class="photo">
				{LinkOpenTag}
					<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
				{LinkCloseTag}
				{block:Caption}
					<p>{Caption}</p>
				{/block:Caption}
			</div>
		{/block:Photo}

	{/block:Posts}
</div>

You Start with Some Basic Variables

The theme HTML declares Tumblr variables using a special markup that looks something like this:

{MetaDescription}

In most cases, these variables represent options available within the customize menu in Tumblr’s dashboard. In the snippet above, the “MetaDescription” will load whatever the Info>Description box contains. MetaDescription is an example of one of the basic variables that every theme starts with. Think of it like a simplified version of WordPress’ template tags.

Custom Options are Easy

Most Tumblr users will probably not know HTML and CSS like you do. If you plan on developing a theme to release to the general community, it’s a good idea to make as much of the theme controllable from the customize menu as possible. The default code editor is not the most elegantly designed, and it’s definitely not something users should have to change font colors from.

If you have to use an API that isn’t already supported within Tumblr’s initial tags, you can do so with some JavaScript and a custom field. As mentioned above, server-side scripting is off the table.

Defined via Meta Tag

You declare all custom options using a meta tag in the top of the theme’s HTML. If we wanted to specify a field for favorite book, the code might look something like this:

<meta name="text:Favorite Book" content=""/>

This would cause the following option to display inside the theme customization screen:

You display the option’s value within the theme using a custom Tumblr tag:

<p>{text:Favorite Book}</p>

Notice how the prefix “text:” designates the type of field to display, and the content attribute specifies the default value. Spaces in the option’s name do not matter. The full documentation has a complete list of available options including color swatches, image uploads, and checkbox IF statements.

Comments Work Differently

One of the most frustrating things to WordPress developers about Tumblr is the lack of comments. Users can certainly respond to posts, but not in the traditional “Type Message Here” way. Tumblr comments come in a few flavors of responses, and they take some getting used to for theme development.

If I like another Tumblr blog’s post, I can reblog (post it to my page) with more comments in the post body. I could also “Like” a post without reposting it myself. In either case, Tumblr places a trackback line into original post that summarizes your action.

If you look at a few active posts on Tumblr, you see how posts can get away without have direct comments through this type of sharing. The staff blog announced a new “Notes” feature to add another option for post feedback, but not many themes support it yet.

Other Expansions

In the past 6 months, the Tumblr team has continued to expand the platform’s capabilities. They’ve added the ability to ask questions, get user feedback, and integrate Twitter accounts into themes. Before reinventing the wheel with JavaScript inserts, make sure that it doesn’t already appear within the growing documentation.

A Growing Trend

These are just a few starting points for people starting out with Tumblr customization. The official theme documentation has a more technical overview of possible theme routes, and it’s a great place to start with any questions. There’s still a learning curve (especially for the type of customization seen in the premium theme section) but like most things on the internet it just takes some time to get used to. The folks at MetaLab have done quite a few compelling designs for Tumblr, including a few of the new premium options available in the Theme Garden.

Based on Google searches, custom theme development is a topic that is only starting to get the coverage and tutorials it needs.  Nettuts recently published a full walk-through guide for its premium subscribers, but it was difficult to find many other widely available tutorials. Is this something you would like to see Build Internet focus on in upcoming posts? Let us know in the comments.