A gentle introduction to Tumblr theme development

Aug 2014

Tumblr holds a reputable position as one of the internet’s best blogging services. I’ve always enjoyed using Tumblr as a blogging platform so I thought I’d give theme development a go.

The process is relatively straight forward, and following its theme documentation it’s super easy to include dynamic content. I might consider making a screencast or a more in depth tutorial at a later date.

A tumblr theme consists, in low-level terms, of 3 components; Simple HTML, inline-css and then handlebars-esque templating for dynamic content.

To create customisable themes which can be edited easily with the need for the end-user to edit the code removed, simply add your desired meta tags just after the <head> tag like so:

<meta name="if: Page fade in" content="1"/>
<meta name="if: Enable Infinite Scrolling" content="1"/>

Here I dropped in the option to enable a JQuery plugin that allows infinite scroll and a page fade in. This is turned on by default with the binary style ‘1’; You can use this boolean option to specify defaults being either on or off. That’s just a quick example, but you can add custom colours, fonts, sizes, margin and padding widths, custom image content and no-end of other cool stuff.

// html
<meta name="color: Background" content="#fff"/>
/*css*/
body {
	background-color: {color: Background};
}

Write some JQuery to include a page fade in, or use this one:

{block:IfPageFadeIn}
   $("body").delay(1000).animate({ opacity: 1 }, 700);
{/block:IfPageFadeIn}

You can add a tonne of options like i’ve done with my build using this templating technique and conditional statements. This in turn creates a much more personal and adaptable theme.

Check out my working theme attempt here