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
CMS
The Code Behind a Tumblr Theme
In this screencast we'll take a first look at the structure of a Tumblr theme and the Tumblr customize area.
Mike Buttery
4 Nov 2013
CMS
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
CMS
A First Look at Tumblr Theme Blocks
In this video we're going to introduce the second of Tumblr's special operators; blocks. Blocks are used to render chunks of HTML in a couple of ways, so...
Mike Buttery
12 Nov 2013
CMS
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
CMS
Adding a Tumblr Theme Sidebar
Using an <aside> element we're going to slot a sidebar into our page.
Mike Buttery
15 Nov 2013
CMS
Starting Our Tumblr Theme's Post Markup
In this video tutorial we're going to begin the main area of our Tumblr theme's page. In fact, we'll be using the <main> element to do so, but as...
Mike Buttery
19 Nov 2013
CMS
Introducing Markup for Tumblr's Photo Post Type
Individual post types play an important part of any Tumblr theme. In this tutorial we'll take a look at the markup and blocks which we'll need for setting up...
Mike Buttery
20 Nov 2013
CMS
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
CMS
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
CMS
Tumblr Link Post Types and Pagination
Let's now take a look at the markup for our Tumblr "link" post type. With that done, we'll also cover pagination.
Mike Buttery
29 Nov 2013
CMS
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
CMS
Styling Our Tumblr Theme
Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling;...
Mike Buttery
11 Dec 2013
CMS
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
CMS
Continuing With Our Tumblr Theme's CSS
In this part of our Tumblr theming series, we're going to continue with our theme's CSS. We'll be working directly on the live site, as a number of elements...
Mike Buttery
17 Dec 2013
CMS
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
CMS
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
CMS
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
CMS
Reviewing and Merging Our Tumblr Theme's HTML and CSS
We've come a long way, having completed massive amounts of theme building; well done! Let's now review our markup and styling, so that we can combine the two...
Mike Buttery
8 Jan 2014
CMS
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
CMS
Tumblr Appearance Options: Color
This is the first in a short collection of episodes, during which we'll gain an understanding of Tumblr's various Appearance Options. We'll be covering image...
Mike Buttery
8 Jan 2014
CMS
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
CMS
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
CMS
Tumblr Appearance Options: Select Elements
It's time to add some more Appearance Options to our Tumblr theme. In this episode, we're going to add a select element, populated with a list of Google...
Mike Buttery
24 Jan 2014
CMS
Tumblr Appearance Options: Text
As it happens, our Tumblr theme doesn't require any custom text. However, as we're using the Tumblr base, there are already some text options included in the...
Mike Buttery
24 Jan 2014
CMS
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
CMS
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
CMS
Improving Our Tumblr Theme Navigation and Post Notes
We've reached the end of our Tumblr theming series! In this video we're going to add some styling to our post notes and the tag page. We'll also be adding...
Mike Buttery
30 Jan 2014
CMS
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
CMS
Easier Tumblr Color Options With LESS
This really is the final video in what's been a massive series! In this lesson we'll see how LESS can improve our Tumblr theming workflow, specifically...
Mike Buttery
2 Feb 2014
CMS