Tumblr Theming 101

Tumblr is home to over 140 million blogs, making it one of the most successful blogging platforms around. Having recently been acquired by Yahoo! it's now firmly set to be one to watch in 2014, and that's great news for Tumblr theme developers!

In this screencast tutorial series we're going to walk through the complete process of developing a responsive Tumblr theme, called "Peter". We'll dive into the code structure, theming options and I'll throw in lots of tips I've gathered as a Tumblr theme developer along the way. Source files will be made available as they're needed, so, if you're ready, let's begin!

Useful Links

Posts in this series

Tumblr Theming 101: Introduction
Welcome to Tumblr Theming 101, a new tutorial series which aims to give you a solid understanding of what a Tumblr theme is, whilst coding a responsive...
Mike Buttery
4 Nov 2013
Web Design
Tumblr Theme Operators and Variables
In this tutorial we'll be taking a detailed look at how Tumblr's theme operators and variables slot content into your theme markup.
Mike Buttery
7 Nov 2013
Web Design
Creating a Tumblr Theme Base
Having looked at the inner mechanics of Tumblr themes, it's time we started building something ourselves! To kick things off, we're going to cheat; we're...
Mike Buttery
14 Nov 2013
Web Design
Adding a Tumblr Theme Sidebar
Using an <aside> element we're going to slot a sidebar into our page.
Mike Buttery
15 Nov 2013
Web Design
Tumblr's Quote and Chat Post Types
In this tutorial we're going to continue developing our Tumblr theme, specifically concentrating on the quote and chat post types.
Mike Buttery
22 Nov 2013
Web Design
Tumblr's Audio and Video Post Types
We're making great progress with our custom Tumblr theme! In this video we're going to continue building our markup, turning our attention to the audio and...
Mike Buttery
27 Nov 2013
Web Design
Creating the Tumblr Post Footer and Notes
Let's kick off this tutorial by reviewing the Tumblr theme markup we've built already. Once that's done, we can continue by sorting out the footer and "Post...
Mike Buttery
4 Dec 2013
Web Design
Quick Tip: How to Disable Tumblr's Default Mobile Theme
Tumblr blogs automatically use a default mobile layout for smaller screens. In this video we're going to look at disabling this default mobile layout, so...
Mike Buttery
17 Dec 2013
Web Design
Completing the Tumblr Post Type CSS
In this episode we'll complete the CSS for our Tumblr Post Types. We'll also be talking a little about escaped entities within CSS, such as arrows and...
Mike Buttery
2 Jan 2014
Web Design
Adding Localization to Tumblr Themes
In this episode of Tumblr Theming 101 we'll complete the CSS for our video post type, which will involve using some principles from Fitvids.js. We'll also...
Mike Buttery
2 Jan 2014
Web Design
Adding Media Queries to Our Tumblr Theme
In this video, we'll be rounding off our responsive CSS by adding some Media Queries. We'll be talking about defensive coding, being sure that we make...
Mike Buttery
6 Jan 2014
Web Design
Tumblr Theme Customization With Appearance Options
In this episode we're going to look at making customization of our theme easier, using Appearance Options. We'll look at the UI for each option, then how we...
Mike Buttery
8 Jan 2014
Web Design
Tumblr Appearance Options: Images
Moving on with our coverage of Tumblr's Appearance Options, we're now going add an option whereby users will be able to set a background image to the theme.
Mike Buttery
8 Jan 2014
Web Design
Tumblr Appearance Options: Boolean Options
In this episode of Tumblr Theming 101 we'll add some Boolean Appearance Options to our theme. This will allow users, through checkboxes, to enable or disable...
Mike Buttery
20 Jan 2014
Web Design
Understanding Tumblr Variable Transformations
In this video we're going to introduce a concept called Variable Transformation. This is something which Tumblr offers, allowing us to alter the data...
Mike Buttery
27 Jan 2014
Web Design
Adding a Twitter Timeline to a Tumblr Theme
Welcome to this, the first of three bonus videos in our series Tumblr Theming 101. During this lesson we'll look at incorporating a simplified Twitter...
Mike Buttery
31 Jan 2014
Web Design
Introducing the Tumblr Static File Uploader and Theme Garden
In this bonus episode of Tumblr Theming 101, we'll take a look at two things. Firstly, we'll look at the static file uploader provided by Tumblr, which helps...
Mike Buttery
2 Feb 2014
Web Design