Advertisment
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.
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.
- Text posts
- Photo posts
- Photoset posts
- Quote posts
- Link posts
- Chat posts
- Audio posts
- Video posts
- Answer posts
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
i want to move my widget on the right side of my page. how do i do that?
Awesome! THX… cant wait to see the psd to T tut !
hey matthew,
i’m still waiting for your “psd to complete tumblr” tutorial
thanks
When will the psd to tumblr theme tutorial be available? And will it show you how to upload online, and insert tumblr codes? Because i have some knowledge of html coding, but i really need a step by step, from start to finish process , in order to understand and learn. Thanks
[...] Visit Source [...]
OH MY GOD. THANK YOU SO MUCH!! I have been looking around for a nice tutorial for the LONGEST TIME. Thank you again!!
Keep it up!!!!
hey i kinda sorta got it o_o but for some reason after adding the code for blocks, i end up getting bullets for every post and i dont know how to fix it. i cant find one single bullet in the html lol. perhaps yu can help?
Really liked your tut. though you look like justin bieber in your pic o.o
Oh dear, time for a haircut methinks =D
Glad you like it.
Matt
Hello. I am trying to edit a tumblr theme. The one I have wont allow the text that comes along with photo’s to show. I can’t figure out how to fix it. Not sure what I’m doing wrong. Help?
Thank you.
Thanks so much for writing this post, Matthew! It came just in time, too, because I’m starting to really want to design my own Tumblr themes but didn’t know where to start! Looking forward to your next Tumblr tutorial post :)
Glad you like it Bianca. The writing of the next article is underway, and I can’t wait to publish it =)
Thanks for the write on Tumblr themes.
[...] more on 1stwebdesigner – Graphic and Web Design Blog » Tutorials [Translate] Categorized under: Tutorials. Tagged with: Code, Create, Structure, Theme, [...]
One of the cleanest skinning tuts I’ve seen. Retweeted.
Thanks for the RT =D
Some teenagers skills really p*** me off XD, make me feel so useless…
Is there some mess in the pagination code or it’s just me?
Again: very nice tutorial!
Yeah, some seem to have replaced some of the Tumblr variables. I’ll fix that up a.s.a.p =)
Thanks mate =)
[...] How to Create a Tumblr Theme (Code Structure) [...]
[...] How to Create a Tumblr Theme (Code Structure) [...]
I read the tumblr theme documentation last night, and one thing that come to my head is that “wow, that easy”.
Before this i’m user and die hard fan of wordpress (still now) play around with creating wordpress theme is a bit complex (but if you learn plone, you know wordpress is much easier) but for tumblr it really simple.
Like I say I read the documentation last night, and using the theme i made today. You can see at my blog, well it pretty simple.. but for one day work I think that pretty good.
For me to make theming the tumblr much easier, design the layout in html form, try make it look like it supposed to look in tumblr. Because when you done that, everything else simply copy and paste.
Can’t wait for your next tutorial though :)
[...] {PortraitURL-64} – The url to your portrait picture. Different sizes are available (16, 24, 30, 40, 48, 64, 96, 128) view source [...]
Loved it, I’m starting to use tumblr now!
Thanks for this Matthew (Matt?).
I just reworked the cosmetics of Solstice by Jake Paul, and the whole while I was thinking “hmm, keep an eye out for an intelligent and fairly easy tutorial on building a Tumblr theme.”
I’ll use this to redesign my social-hometown-photo-sharing tumblr site at aroundmytown.us
Again Matthew, thanks!
P.S. Should you have a photo of your town to share, by all means, please do so!
Keep an eye open for the psd to html tutorial then, you may pick up some tips =)
And Matt, Matthew, either go =D
From what you’ve written there. Surely it’s looks easy to make.
I think i should try it once a while :P
I guess it’s just like html, remembering the tags. Only thing that’s different is that you have a set of conditional tags as well =D
owh well.i guess a hands on experiment will show the easiness of developing the tumblr right?
Thanks again for your time! :)
hei matt, thank u for posting this.
cheers :)
Mmmm…seems tasty :D
I’m surprised how Tublr themes are built :) so much different from WP. Good article!
Thanks, yeah, they get rid of all the php. I suppose you could say {block:posts}{/block:posts} is sort of the loop, but it does most of that error checking for us =D