Line25

Getting Started with Tumblr & Custom Theme Design

Read the full post

Websites powered by Tumblr (or Tumblelogs , or tlogs) are becoming increasingly popular. Tumblr fills the gap between Twitter and the full blog, allowing users to post short updates in text, video, photo, link, chat, quote and audio formats quickly and easily. Let’s take a look at the basics of what Tumblr is, and how to get a tumblelog of your own up and running.

What is Tumblr?

Tumblr logo

Tumblr is basically the daddy of the micro-blogging scene. It provides a platform for those updates that are too large for Twitter’s 140 characters, but too small to be converted into a full-on WordPress blog post. Just like networks such as Twitter, Tumblr has the social feature of being able to follow and receive updates from friends and contacts. Being a hosted service it’s easy to setup and manage, with just a simple sign up screen being all you need to complete in order to start a site of your own. Despite being a hosted service, you don’t have to stick with the mysite.tumblr.com domain, with just a few steps you can configure your own domain.

Tumblr post types

Tumblr allows you to share anything through its six posting options of text, photos, quotes, links, audio and video through the Tumblr dashboard, mobile phone, desktop client or by email.

How do people use Tumblr?

Tumblr is often used alongside Twitter, blogs and social networks as a place to post photos and links, but is also commonly used as a person’s primary website. Here’s a few great examples of how Tumblr is being put to use across the web, notice the familiar elements and features among each site?

View the website

View the website

View the website

View the website

View the website

View the website

View the website

Getting started

To get started with a Tumblr site of your own, first head over to Tumblr.com and create a new account.

Run through the basic options wizard that follows, setting your website title, profile picture and description.

Post some stuff! It’s as easy as that!

You can also integrate your Tumblr site to various other social networks. Post updates to Twitter or Facebook, or pull in RSS feeds from other sources and post them on your Tumblr blog. All these options can be found under Customize > Services.

Customizing Tumblr

Just like the WordPress application, there’s two main approaches to customizing your Tumblr site. Choose a ready-made theme from the Tumblr Theme Garden, or if you’re confident with hand writing your own HTML, build your own. Let’s start with the easy option – Installing a ready made theme!

To access the commonly used premium themes, go to Customize from the Tumblr dashboard, then select the Themes dropdown. This just a small selection of themes available, there’s many more free and premium theme from the Theme Garden, as well as from third-party developers across the net.

Once you’ve found a theme you like, simply hit Install Theme and Tumblr will do all the work for you.

Building your own Tumblr theme

For those confident with their HTML and CSS skills, there’s the option of building a custom theme from scratch. If you’re used to developing for WordPress, the process is pretty similar – You insert special tags in the HTML code to add the advanced functionality to the site. Tumblr isn’t quite as advanced as WordPress, which means learning your way around theme files is much easier.

<h3><a href="{Permalink}">{Title}</a></h3>

There’s two types of template tags in Tumblr – Variables and blocks. Variables are used to insert dynamic data into your theme file, similar to how WordPress works. For instance, simply insert the tag {Permalink} inside an anchor to generate a link to a post.

{block:Text}
    <div class="post text">
        {block:Title}
            <h2><a href="{Permalink}">{Title}</a></h2>
        {/block:Title}

        {Body}
    </div>
{/block:Text}

Blocks on the other hand, are used to create segments of HTML relative to a certain function. This is how the different posts types (audio, video, quote etc) are generated.

{block:Photo}
	<div class="post photo">
	    <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
	
	    {block:Caption}
	        <div class="caption">{Caption}</div>
	    {/block:Caption}
	</div>
{/block:Photo}
	
{block:Photoset}
	<div class="post photoset">
	    {Photoset-500}
	
	    {block:Caption}
	        <div class="caption">{Caption}</div>
	    {/block:Caption}
	</div>
{/block:Photoset}
	
{block:Quote}
	<div class="post quote">
	    "{Quote}"
	
	    {block:Source}
	        <div class="source">{Source}</div>
	    {/block:Source}
	</div>
{/block:Quote}

Your theme file will need blocks for each of the seven post types in order for Tumblr to render each different style of post. Unlike WordPress themes that are split across multiple files, your Tumblr theme is basically a single HTML page with all the different post scenarios bundled together.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

35 Comments

  1. Yoosuf says:

    good, post, i am using Tumblr for a while :)

  2. Great summary about Tumblr.
    I'm using it my personal brand website. It's easy to customize and really complete; the best microblogging CMS IMO.

  3. Scott says:

    Tumblr really is a great platform, more people (including my self) should use it.

  4. I love Tumblr! It's a good platform.

  5. Eko Setiawan says:

    Thanks..this article very useful for me. We are planing to create Tumblr template.

  6. Thank you very much for this super useful and easily digestible post :)

  7. MFC Designs says:

    Great post Chris! Thanks!

  8. Scott Corgan says:

    Oh Tumblr, you are a such a secret weapon!

  9. Artem says:

    where would i find some more info on customizing tumblr??

  10. Such a very useful Article . Thanks for the posting..

  11. iainspad says:

    Does this mean you will give Tumblr theme tutorials in the future Chris? I notice you're practicing with Jake the Dog's website on Tumblr Themes, do you think a theme tutorial is possible in the near future?

  12. Pippa says:

    Tumblr sounds interesting, not something I've looked at before might need to check it out. Cheers

  13. Just what the doctor ordered. Thnx for this. I'm also using tumblr, but didnt have time to customise it my way. Will do it soon thnx to u spoon ;)

  14. i really want this type of tuts thank

  15. Gagsy says:

    Yup. thats a cool blog.
    I am using it for quite some time.
    http://www.gagsy.tumblr.com

  16. Saad Ibrahim says:

    wow… thats easy!

  17. This is why I like tumblr, very easy to use and to theme.

  18. Greg Babula says:

    When I first started working on my website in Tumblr I was really surprised and happy about how simple it was to learn, I would def recommend it to everyone

  19. Nice tutorial and introduction to Tumblr.

  20. jiewmeng says:

    i am using tumblr too. because i find twitter's 140 characters too limited and the free wordpress.com site comes with too much limitations. no custom css/extensions etc (i havent been on wordpress.com for sometime, so correct me if i am wrong)

  21. DeadJam says:

    Cool, I'll have a look. I use WordPress and a Twitter feed for my blog.

  22. This came at the right time. Since I just started up my tumblr account today :)

  23. stellacyan says:

    thanks for the great post, Chris!

  24. As a soon to be Web Designer/Developer/SEO expert (in college), this is certainly interesting. Thanks!

  25. keith says:

    i will be looking into this thank you for good post.

  26. Becky Bryant says:

    Brilliant, simple explanation. Just what I've been looking for thank you!

    Can't wait to get started on my tumblr theme now, just in time for my new iphone :D

  27. Ronald L. Harris, Jr. says:

    This is a great article on Tumblr. I'll be putting this information to good use very soon. Thanks.

  28. Great list! Thanks for writing..

  29. This is very interesting, but wow all these easy to customize themes is making it harder for us web designers :( but I guess thats just how technology is…

  30. DSM Design says:

    I should really give this a bash! Sounds awesome!

  31. csssample says:

    Excellent Article, Keep posting like this

Comments are now closed