Adding a Title for All Tumblr Post Types

Posted by: Kevin Habich on February 01, 2013

If your Tumblr blog has mixed content with text posts, photo posts, audio posts, etc, it begins to look really weird without titles for some of the posts. The text posts look great with a chosen title, but Tumblr doesn’t let you give song and video posts a title. This disrupts the flow of your site.

Here’s what mine looked like. 

image

Not very cohesive.

There are probably many ways to achieve titles for all of your posts, but here is a quick 3 step method that I used:

1) Go to the customization section of your tumblr page, and edit HTML. Before doing anything, copy the entire contents of your current theme and paste to a text editor. In case something goes haywire, you have a backup. Now do a page search for {block:Video} in your HTML. This contains the code that generates your video posts.You’ll want to make sure that your {caption} block is the first thing in the video block. 

For me, that meant changing this:

{block:Video}
  <div class="video-wrap">{Video-500}</div>
  {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}

To this:

{block:Video}
  {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  <div class="video-wrap">{Video-500}</div>
{/block:Video}

Now do this same thing for Audio, Photo, and Quotes. If you look at your tumblr site now, you would see the posts have reversed the song/video with the post content.

2) Now that you have your post content in the right order, now we need to find out information about your current titles. Open your tumblr in a browser that lets you inspect the html. Right click on your title and choose inspect element, brining you right to that HTML tag

image

This shows you the html that creates your post titles. 

image

For me the HTML element is:

<h3><a>{title}</a></h3>

3) Now you need to edit all your previous posts (or just your important ones) and add a title. Edit the old tumblr post, view it as html and you will see something like this:

<p>New Track!</p>

Now, just add the title like we found in step #2. This particular post would become something like:

<h3><a href="http://kevinhabich.com/post/40255816223/great-song">Sir Sly - Gold</a></h3>
 <p>New Track!</p>

Note: You’ll need to make sure that you get the correct permalink of your post so the link is correct (something Tumblr automatically generates for posts with titles).

image

4) Viola! Open your home page and refresh. If you did this correctly, you should see a much better formatted blog!

imageThis poorly represents the progress of what we just did. If this heyour tumblr, or if you have problems let me know in the comments!