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.

  • http://eyoosuf.com Yoosuf

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

  • http://www.antoineguedes.com Antoine Guédès

    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.

  • http://www.scottcarmichael.co.uk Scott

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

  • http://black-avalon.tumblr.com/ Carmela Anzelmo

    I love Tumblr! It's a good platform.

  • http://www.dynamicwp.net Eko Setiawan

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

  • http://www.rochelledancel.com Rochelle Dancel

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

  • http://mfcdesigns.com MFC Designs

    Great post Chris! Thanks!

  • http://www.scottcorgan.com Scott Corgan

    Oh Tumblr, you are a such a secret weapon!

  • http://www.artempsd.webs.com Artem

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

  • http://MELIJOY.FREETOSERVE.INFO Melissa joyce

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

  • http://iainspad.com iainspad

    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?

    • http://twitter.com/chrisspooner Chris Spooner

      Maybe! I'd have to familiarise myself a little more with the whole templating system a little better first.

  • http://www.pippasweb.co.uk Pippa

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

  • http://www.taptapdesign.com Igor Ivankovic

    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 ;)

  • http://www.theudaipurhotels.com udaipur hotels

    i really want this type of tuts thank

  • http://www.gagsylive.com Gagsy

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

  • http://www.saadibrahim.com Saad Ibrahim

    wow… thats easy!

  • http://laggoun.com Loubna AGGOUN

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

  • http://www.gregbabula.com Greg Babula

    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

  • http://www.jordanwalker.net Jordan Walker

    Nice tutorial and introduction to Tumblr.

  • http://jiewmeng.tumblr.com jiewmeng

    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)

  • http://www.appzilla.co.uk DeadJam

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

  • http://www.kickinuppixels.com/ Stephan Telesford

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

  • http://stellacyan.com/ stellacyan

    thanks for the great post, Chris!

  • http://jeffemmersonmymemoir.wordpress.com/ Jeff Emmerson

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

  • http://www.adooz.co.uk keith

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

  • http://www.printandpixels.co.uk Becky Bryant

    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

  • Ronald L. Harris, Jr.

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

  • http://www.stevensst.com Freelance Website Design

    Great list! Thanks for writing..

  • http://newartstyle.com Texas Web Designs

    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…

  • http://www.dsm-design.co.uk/ DSM Design

    I should really give this a bash! Sounds awesome!

  • http://csssample.com csssample

    Excellent Article, Keep posting like this