HTML & CSS
Article

Tutorial: Build a Simple Tumblr Theme with Bootstrap

By Ashraff Hathibelagal

If you have ever looked at all the wonderful Tumblr themes and wondered what it takes to build one from scratch, then this tutorial is for you. In this post, I am going to show you how to use Bootstrap and Tumblr’s special operators to create a theme you can use for your Tumblr blog.

Here’s what you need to get started:

  • A Tumblr account
  • A basic understanding of Bootstrap the popular front-end framework.

Our Basic HTML and Bootstrap Resources

A Tumblr theme is just an HTML file that uses Tumblr’s special operators. We’ll start off by creating a new file using our favorite text editor and adding the following boilerplate HTML code to it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  </body>
</html>

Next, we’ll add the necessary Bootstrap resources. Bootstrap CDN makes it easy to add the files to your theme. Just put the following in your theme’s head:

<!-- Bootstrap CSS -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" 
      rel="stylesheet">

And the following before the closing body tag:

<!-- Bootstrap JS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script>

Adding Custom Styles

This theme is going to have a narrow layout that will be 550px wide. It is also going to have a 50px tall fixed position header. Add the following to the theme’s head to handle these requirements:

<style type="text/css">
  body {
    padding-top: 60px;
  }

  .container {
    width: 550px;
  }
</style>

Creating the Header

We’ll use Bootstrap’s navbar to create a header for our theme. This allows us to use our first Tumblr variable:{Title}. The {Title} variable refers to the title of the blog. The following code is added to the body of the theme:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">{Title}</a>
    </div>
  </div>
</nav>

It is a good idea to use the {Title} variable in the HTML <title> tag as well:

<title>{Title}</title>

If you were to apply the theme to your Tumblr blog now, it would look like this with just white space below it:

Tumblr theme header

Creating a Container to Hold Posts

Next we’ll add a div that we can use as a container for all Tumblr posts. Add the following code below the nav element:

<div class="container">
</div>

As you might already know, Tumblr lets you add different types of posts to your blog. For the sake of simplicity, we are going to handle the following post types:

  • Text
  • Photo
  • Quote

{block:Posts} is a Tumblr block that gives us a list of all the posts available on a blog.

Add the following code inside the posts container:

{block:Posts}
{/block:Posts}

Next, to determine the type of the current post, we’re going to use the following blocks:

  • {block:Text}
  • {block:Photo}
  • {block:Quote}

For any post, only one of these will be rendered.

Handling Text Posts

Text posts usually have a title and a body that can be accessed using the variables {Title} and {Body}, respectively. Add the following code inside the {block:Posts} tag.

{block:Text}
  <h2>{Title}</h2>
  <p>{Body}</p>
{/block:Text}

Handling Photo Posts

Photo posts have a caption and a photo. The caption can be accessed using the {Caption} variable. Accessing the photo is a little more complicated. To make it easier for you to use consistent image sizes all over your blog, Tumblr provides you with scaled versions of photos.

For example, to make sure that your photo is not wider than 500px, you could use the variable {PhotoURL-500}. Similarly, if you want to make sure that the photo is not wider than 100px, you could use the variable {PhotoURL-100}.

For this theme, I’m going to use {PhotoURL-500}.

We can use a Bootstrap Panel to show the photo and its caption, placing the caption inside panel-heading and the photo inside panel-body.

The code to handle photo posts would then look like this:

{block:Photo}
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">{Caption}</h3>
    </div>
    <div class="panel-body">
      <img src="{PhotoURL-500}"/>
    </div>
  </div>
{/block:Photo}

Handling Quote Posts

In this type of post, you will have to use the intuitively-named variables {Quote} and {Source}. Bootstrap applies its own styles to the HTML <blockquote> element, so we can use this directly in our theme:

{block:Quote}
  <blockquote>
    <p>{Quote}</p>
    <footer>{Source}</footer>
  </blockquote>
{/block:Quote}

Handling Pagination

At this point, your theme will look complete if you apply it to your blog. However, Tumblr only shows a fixed number of posts at a time.

You can change this number in the Advanced options page. As you can see in the screenshot, I have set the Posts per page value to 3:

Tumblr Advanced options

Currently, if you add too many posts to your blog, the oldest ones will no longer be accessible. Therefore, you have to handle pagination in your theme.

Tumblr has two variables to help with this: {PreviousPage} and {NextPage}. The values of these variables are links, so you will have to put them inside <a> tags. To make sure these links are shown only when there is a valid previous or next page, we use the {PreviousPage} and {NextPage} variables inside the {block:PreviousPage} and {block:NextPage} blocks, respectively.

We can use Bootstrap’s button classes to style our pagination links.

The following code will be added after the {block:Posts} block:

<p class="text-center">
  {block:PreviousPage}
    <a href="{PreviousPage}" class="btn btn-default">Previous</a>
  {/block:PreviousPage}
  {block:NextPage}
    <a href="{NextPage}" class="btn btn-default">Next</a>
  {/block:NextPage}
</p>

Applying the Theme to Tumblr

Visit your Tumblr dashboard, select a blog, and click Customize. In the next screen, click the Edit HTML link. You will be presented with a text editor that will show the HTML contents of your current theme. Replace those contents with the code of the new theme we just built. Press the Update Preview button first, then the Save button to apply the new theme.

Note: Since we are using external links for the Bootstrap files, the preview might not look right. However, after pressing the Save button, when you visit your blog, you should see the Bootstrap styles applied correctly.

Tumblr Theme final

Conclusion

We now have a simple but complete Tumblr theme that uses the latest version of Bootstrap (3.3.2 as of this writing). You can download the source HTML file for this example if you like. You can always refer to Tumblr’s documentation to extend this theme.

Bootstrap CDN also hosts several themes for Bootstrap. In this tutorial, we’ve used the default Bootstrap theme. If you wish to use a different theme, you simply have to change the URL of the Bootstrap CSS in the head of our Tumblr theme.

If you’ve had any experience dealing with Tumblr themes with Bootstrap or another framework, let us know in the discussion.

Comments
devpatel

Right, I completely agree with you but now a days as pur cirrent senario wordperss theme development]is most famous and also effective sa well as user conveinent.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.