Introduction to Developing a Custom Tumblr Blog Theme

by on 26th January 2011 with 6 Comments

Tumblr is the fastest growing blog network on the web today. With the ability to quickly reblog any of your followers’ posts it truly revolutionizes the way we interact with a digtial community. Tumblr has taken the popular dashboard feature and expanded it into a personal blog feed.

Amongst the many popular features of the service is the ability to directly customize the look and feel of your page. Each blog has its own theme which is used to give your page its layout and color scheme. There are plenty of free and paid themes to choose from, but it’s much easier and more fun to create your own.

screenshot

In this brief tutorial we’ll be going over the major pieces to any Tumblr theme. The engine is powered using straight HTML/CSS code along with in-text variables for block elements. Basic HTML is all that’s required to really get started and build your own theme.

Understanding Pages

Any Tumblr theme is simply a single page of HTML code with conditional case variables in-between. This basically means all of the page views are separated by case variables in one long document.

So for example all posts from your site will be broken down into categories. These are based on media content such as text, image, video, URL link, etc. These are all different options or views for your blog. Separate options can be activated based on whichever type of page is being requested.

screenshot

Now these types of conditionals are known as blocks. These are known as case variables which display unique content based on certain conditions. Page variables are single containers which hold dynamic values. For example, a Page Title or RSS feed will change with each blog so these values can be added through variables ({Title} and {RSS} respectively).

Building the Header

The heading is the first piece to any Tumblr theme. It contains all the important details about your blog and which meta options are set. Below is a bit of sample code to use in your header to get started.





{block:IndexPage}


{/block:IndexPage}
{block:PostSummary}{/block:PostSummary}


 





The document doesn’t look much different than a standard HTML page. You begin with a DOCTYPE declaration followed by your html and head tags. Inside you may notice two lines of code delineating a block element. The opening {block:IndexPage} is creating a block of code to only display on the index page.

Inside we have a title and meta description which display the {title} variable of your blog. All other pages have a title containing a post content summary labeled {postSummary}. You will find these variables littered throughout themes such as {Favicon} and {RSS} for header placings.

screenshot

One last bit to notice is how all of my theme’s CSS styles are in external documents. This provides a much quicker way to access data and process DOM actions. Also since Tumblr has to load its own files before loading your theme external styles will expedite the whole process.

Blog Posts

Spend some time examining your document body and building your page structure. With time you should reach your primary content area. Inside here is where all of your blog posts and comments will be listed. This is marked by a {block:Posts} and contains many sub-variables.

Within the Posts block we are checking for the different types of media. There are a lot to go over and they’re all relatively straightforward. I’ve added a list of post block types below:

  • {block:Text}
  • {block:Photo}
  • {block:Photoset}
  • {block:Quote}
  • {block:Link}
  • {block:Chat}
  • {block:Audio}
  • {block:Video}
  • {block:Answer} *for ask messages

These may seem a bit difficult to take in at first. Truthfully the best way to understand is by practicing and building out new Tumblr themes. If you’d like deeper information into each post media check out the official themes docs.

Functional Pagination

Tumblr doesn’t plan to keep all your posts loaded on a single page, that could become very intrusive. Pagination is built into Tumblr’s themeing engine and supports next/previous links for your archive pages.

screenshot

The first style of pagination guides the user between your older pages. Each page generally stores 7-10 posts, but can be altered to contain more. This type of conditional will work on any page and can display links as long as there are more pages to traverse. Below is an example of this style:

{block:Pagination}
    {block:PreviousPage}
  • Previous
  • {/block:PreviousPage} {block:NextPage}
  • Next
  • {/block:NextPage}
{/block:Pagination}

This is a very rudimentary example, though it does clearly illustrate the point. This could be placed anywhere in your code to generate a Pagination block of links.

The second option is to offer links between posts. These will show only on individual post pages where a visitor can see your content and responses listed. Whenever there is a post either before or after in the archives you can display nav links.

The code looks exactly the same as above, except with slightly different variable names. The initial block checks for {block:PermalinkPagination} instead of just Pagination. Also all instances of Page are replaced by Post as outlined below.

  • {block:PreviousPost}{/block:PreviousPost}
  • {block:NextPost}{/block:NextPost}
  • {PreviousPost}
  • {NextPost}

JumpPage Nav

There is also a 3rd option for navigation links called jump pages. These offer visitors a list of numerical links pointing each towards a page in your blog archives. The structure is similar to other forms of pagination, though with its own slight changes.

screenshot

I’ve included another example below for Jump Pagination. The content is a bit more confusing to digest so take time to look over the code. There are no new concepts here since all Tumblr themes are straight HTML and basic variables.

{block:JumpPagination length="5"}
    {block:CurrentPage}
        <span class="currentPage">{PageNumber}</span>
    {/block:CurrentPage}

    {block:JumpPage}
        <a class="jumpPage" href="{URL}">{PageNumber}</a>
    {/block:JumpPage}
{/block:JumpPagination}

The length=”5″ attribute through the first element counts how many links to show. This means our block list will always contain 5 links geared towards a central axis.

To further expand on this theory the only times you’ll see the current page towards an endpoint is at the very start or end of navigating pages. The system works by setting the current page directly in the middle of all Jump Pages. So for example on page 7 of our blog archives we should see links for pages 5-9.

Further Readings

These are some of the most basic intro pieces for developing into Tumblr. Themes are a great way to customize your blog and add in your own pinch of creativity. It’s encouraged to check out Tumblr’s official theme documentation for detailed examples and resources.

Some pages you may potentially be interested reading include likes, following count, search queries, and post notes. For every Tumblr account you are given a free theme by default. Spend some time dissecting their official code to get a better understanding of how Tumblr’s system works and how to manipulate your own customizations.

Comments & Discussion

6 Comments

  • http://idrakimuhamad.tumblr.com idraki

    I’ve created a tumblr theme for my own blog and also share it for public. I can say its a fun thing to do, since you just need to deal with their script and not the PHP stuff, though there’s surely limitation for it.

  • http://gonzothegreat.rajtoral.com// Gonzo the Great

    Hi Jake,

    At this very moment I’m building a free Tumblr Theme – gonzoblog Tumblr Theme. I’m tuning the last bits and writing instructions how to install and customize the theme.

    Already made my own personal Tumblr Blog (based on this free version). If you wanna see it, please be my guest: http://gonzothegreat.rajtoral.com//

    I’ld not mind any feedback from you guys and girls ;-P

    Thanks for sharing this article, Cheers & Ciao ..

  • Pingback: Land-of-web » Getting started with Tumblr (29 useful articles and tutorials)

  • Pingback: 10 Articles that Will Help You to Create Your Own Tumblr Theme | ThemesTumblr

  • http://www.rainbow-website.net/ custom web page design

    Like other web 2.0 Tumblr had also nice sets of theme and it’s free for a beginner’s blog, though it’s free but it’s nice and attractive. Website’s theme is very important, indeed it’s what makes a website more attractive and interesting.

  • http://pantyhoseparty.tumblr.com PParty

    Hello, does anyone know how to style individual pages so that they display extra information on the title and description tag? I wanted to append the image description on my photo pages to the title meta tag itself.

Subscribe
Membership
About the Author