How to Create a Tumblr Theme (Code Structure)

 Posted in Tutorials 598 days ago Written by: Matthew Corner
  • Buffer
  •  62
  • Buffer

As we have previously seen, Tumblr allows its uses to create custom themes giving the owner of a tumbleblog the ability to truly customise their tumbleblog to be their own. While tumblr coding is fairly easy to pick up compared to other more complex blogging systems, I want to give you an insight into the code and structure we are going to be deploying next time around when we set about converting a psd to tumblr.

How to Create a Tumblr Theme (Code Structure)

Understanding the basics

Before we get stuck into the Tumblr code itself, you need to first know what a Tumblr theme looks like. Gone are the gazillion template files of other CMS’s; Tumblr uses one and only one. A single page of html, with the css and scripts in the head of the file is all you’ll need.

Now that you know how a theme looks, we are going to look at two simple concepts that make our single html page into a fully dynamic tumblr blog. These are variables and blocks.

Variables are exactly what the name suggests. A place-holder tag that our data is dynamically inserted into. They are used all across the theme in anything from titles to our dates. They use curly brackets and look like this :

Blocks on the other hand are a sort of step up from variables. They are used to display chunks of html and variables for different occurrences, e.g. for each different kind of Tumblr post. They can even be used conditionally to display stuff such as next and previous page links. Like variables, blocks use curly brackets, but are defined as a block, and open and close in a manner similar to html elements.

Put these blocks and variables to user together within html, and you will end up with a theme!

Html head

As always in Html, there are several pieces of information you are going to want to include within the head of your html document, and Tumblr does not let us down. It provides us with several variables that can be deployed with great ease.

{Title} – The html safe title of your blog

{Meta Description} – An html safe description of your blog for use within the meta tag

{Favicon} – A dynamically generated favicon url from your portrait photo

{RSS} – The url to the RSS feed of your tumbleblog

<head>
	<title>{Title}</title>
	<link rel="shortcut icon" href="{Favicon}">
	rss+xml" href="{RSS}">
	<meta name="description" content="{MetaDescription}" />
</head>

Basic Variables

Before we start displaying our posts and content, there are certain things we are going to want to display around our tumbleblog. Most of these are likely to appear in our header, such as our blog name, and logo / photo. Here are some of the variables that make this possible.

{Title} – The html safe title of your blog

{Description} – The description of your blog which may include html

{PortraitURL-64} - The url to your portrait picture. Different sizes are available (16, 24, 30, 40, 48, 64, 96, 128)

<div id="header">
	<h1>{Title}</h1>
	<p>{Description}</p>
	<img alt="{Title}" src="{PortraitURL-64}" />
</div>

Display Posts

Now that we have set up the easy stuff with some basic variables, it’s time to get stuck into the more dynamic posts which are rendered with the help of both blocks and variables. The posts block is placed in the area that all our different types of posts will be displayed.

Within our posts block, we can start to branch out into our many different kinds of posts. Each of these are shown below.

{block:Text}{/block:Text} – Displays Text posts

{block:Photo}{/block:Photo} – Displays Photo posts

{block:Photoset}{/block:Photoset} – Displays Photoset posts

{block:Quote}{/block:Quote} – Displays Quote posts

{block:Link}{/block:Link} - Displays Link posts

{block:Chat}{/block:Chat} – Displays Chat posts

{block:Audio}{/block:Audio} – Displays Audio posts

{block:Video}{/block:Video} – Displays Video posts

{block:Answer}{/block:Answer} – Displays answer posts

Each different type of post has several different types of variables and further blocks that are relevant only to that type of post, but there are several variables that are likely to be used in ever post such as the link, and tags.

{Permalink} – The exact url for a single post

{ShortURL} – The sharing friendly short url for a single post

{PostID} – The unique numeric post ID for a single post

{block:Posts}
...
	{block:Text}
	<div>
		{block:Title}
		<h2><a href="{Permalink}">{Title}</a></h2>
		{/block:Title}
		<div>
		{Body}
		</div>
	</div>
	{/block:Text}
...
{/block:Posts}

Moving down into each specific post type itself, variables and blocks become far more specific to the post type. I won’t go into any of them as there’s a lot of them to remember, but if you feel you want to take a look at the them now, then here’s where to learn more.

Next / Previous Links

The other majorly important feature you are going to want to include is pagination for your posts and pages; in both cases Next and Previous links, and lo-and-behold, Tumblr caters for both with variables and blocks.

An initial block is used to conditionally display the full pagination html, with two further conditional blocks to conditionally display each Previous and Next link. Finally, two variables are used to display the relevant destination url.

Single posts have different blocks and variables for pagination than those for pages, so here they are.

For pages, these are the blocks and variables used for pagination.

{block:Pagination}{/block:Pagination} – Only displays if there are previous / next pages to link to

{block:PreviousPage}{/block:PreviousPage} – Only displays if there is a previous page

{block:NextPage}{/block:NextPage} – Only displays if there is a next page

{PreviousPage} - Url for the previous page

{NextPage} – Url for the next page

{block:Pagination}
<ul>
	{block:PreviousPage}
	<li>
		<a href="{<span class=">PreviousPage</a><a href="{<span class=">}">Previous</a>
	</li>
	{/block:PreviousPage}
	{block:NextPage}
	<li>
		<a href="{<span class=">NextPage</a><a href="{<span class=">}">Next</a>
	</li>
	{/block:NextPage}
</ul>
{/block:Pagination}

Similarly, for posts, these are the relevant blocks and variables.

{block:PermalinkPagination}{/block:PermalinkPagination} – Only displays if there are previous / next posts

{block:PreviousPost}{/block:PreviousPost} – Only displays if there is a previous post

{block:NextPost}{/block:NextPost} – Only displays if there is a next post

{PreviousPost} - Url for the previous post

{NextPost} – Url for the next post

{block:PermalinkPagination}
<ul>
	{block:PreviousPost}
	<li>
		<a href="{<span class=">PreviousPost</a><a href="{<span class=">}">Previous</a>
	</li>
	{/block:PreviousPost}
	{block:NextPost}
	<li>
		<a href="{<span class=">NextPost</a><a href="{<span class=">}">Next</a>
	</li>
	{/block:NextPost}
</ul>
{/block:PermalinkPagination}

Further Reading

There are several further features that you may want to add into your theme, and as usual Tumblr caters for many of them. However, I simply wanted to go over the basics here, and not flood you with unnecessary information while learning. If you do want to continue reading, take a look at the official Tumblr documentation for these features listed below.

What’s up Next?

Next up is a tutorial that will teach you how to take a psd design of a tumbleblog, and turn it into a fully fledged Tumblr theme. Keep your eyes open for that, but for now, here’s a sneak peek at what we’ll be creating!

Click on the image to see Full Size


 Did you enjoy this article and found it useful?

Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.
Free Website
 

 62 Brilliant Comments - Join Discussion Now!

  • tony

    Posted 4 days ago
    62

    I’ve customized my tumblr theme, mostly to make it look similar to my website. What I want to know is, how do I package my theme so that others can use it?

    I’m not finding any information googling about for that.

    Reply
  • Jayesh

    Posted 11 days ago
    59

    Did the follow up tutorial to design a psd and then code it to HTML written?
    Please provide me link for that post.

    Reply
  • Galen Gidman

    Posted 13 days ago
    58

    Nice writeup — I actually created a framework that speeds up Tumblr theme development by a lot. Let me know what you guys think of it: https://github.com/galengidman/tumblr-framework

    Reply
  • Rach

    Posted 30 days ago
    57

    wats with all those random letters like and stuff, i want to be a theme maker so i neeeeeeeed to understand these

    Reply
  • Jonathan

    Posted 104 days ago
    51

    Can someone just make a dang program that does this for you? I never will understand all this programming stuff.

    Reply
    • Jacque

      Posted 47 days ago
      54

      Yah it’s to fucking long who’s gonna read all this?

      Reply
      • Michael

        Posted 39 days ago
        56

        Can’t tell if trolling…or lazy.

        Reply
  • Jonathan

    Posted 104 days ago
    50

    After the first part they said now we are done with the easy stuff, now let’s get into the more complicated. I’m sorry, but all of that was confusing as Hell.

    Reply
    • Jill babeyy

      Posted 96 days ago
      53

      ahaahhah yeahhh!

      Reply
  • Hotele Karpacz

    Posted 108 days ago
    49

    Thanks for the write up! Also, just a heads up, your RSS feeds aren’t working. Could you take a appear at that?

    Reply
  • Sara

    Posted 121 days ago
    48

    Please please post the psd follow up!

    Reply
  • Thea

    Posted 244 days ago
    46

    This is basically the same as the Tumblr tutorial. It helps, but only if you know the very basics and stuff.

    Reply
  • PixelTunnelVision

    Posted 262 days ago
    44

    A decent primer, I suppose, but all in all there are some gaps and open-ended concepts here. I take it the planned sequel article was shelved?

    Reply
    • Rean John Uehara

      Posted 262 days ago
      45

      Unfortunately you are correct. It’s been almost a year since this was published, but we’re keeping tabs of articles that needs updating as of late and will do something about them soon. :)

      Reply
      • Dapo

        Posted 96 days ago
        52

        Please do the sequel article. I think a lot of people would be interested in how to take a psd design of a tumbleblog, and turn it into a fully fledged Tumblr theme. Thanks.

        Reply
  • alejandra

    Posted 284 days ago
    43

    this, is all too confusing. I did not understand any of this, at all, whatsoever.

    Reply
  • angel

    Posted 284 days ago
    42

    Hi…this post is pretty old and I can’t find the next tutorial, do you still thinking do it?..I hope you do because is hard found good tutorials about tumbl thems

    Reply
  • fernando

    Posted 337 days ago
    41

    I was waiting for the tutorial to take a psd design of a tumbleblog, and turn it into a fully fledged Tumblr theme

    Reply
  • GSB

    Posted 374 days ago
    39

    Any intention of expanding on this or posting up your PSD tutorial? I’d love to read it.

    Reply
    • Chris M

      Posted 361 days ago
      40

      I was wondering the same thing, it’s over 6 months ago that this was published =\

      Reply
  • Angela

    Posted 380 days ago
    38

    Hi, how do I make the code to show the number show this?
    1, 2, 3, 4, 5 BACK

    it’s like, visitors can just choose to skip to page 4 of my posts.

    Reply
  • raeraerae

    Posted 383 days ago
    37

    Does anyone know how to edit the distance between posts? i.e. I want all my photos and text posts to look connected… and the source of my reblogs to be hidden until they click on the permalink. Does anyone know how to do this? Thanks so much!

    Reply
1 2

 Add Your Own Brilliant Comment:

Tags allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

US