DiggingIntoWordPress

by Chris Coyier & Jeff Starr

How to Implement Tumblr-Style Links for Posts and Feeds

Posted by on

Since posting the DiW tutorial on designing a Tumblelog theme for WordPress, several readers have asked for a tutorial on how to setup just the Tumblr/tumblelog-style post links …without having to implement the entire theme.

So in this tutorial, I will extract the tumblelog-link information from the theme tutorial, simplify it, and enhance it to include a link-back function and Tumblr-style post links for your feed items as well. This new, refined version is very clean, requires only three steps, and should work with any version of WordPress. This technique was refined and implemented here at Digging into WordPress about a month ago and has been working great ever since.

At the completion of this tutorial, we will have achieved the following:

  • Tumblr-style post links — make it easy to add a link to another site and have it appear as the title link for your post
  • Tumblr-style feed links — have those tumblelog post-title links also appear in your post feeds
  • Linkback to your post — automatically include the post permalink within the post itself

Here is an example of one these Tumblr-style posts, and here is a whole bunch of them. As you can see, the idea is that you can quickly and easily post about something awesome you found on the Web, and have the title of your post link directly to it. Tumblelog-style, just like on Tumblr.

Sound good? Let’s dig in and get started..

Step 1: add some stuff to your functions.php file

Open your theme’s functions.php file and make some room for the following three functions:

// tumblr-like post titles in posts @ digwp.com
function tumblrPostTitles() { 
	global $post; 
	$permalink = get_permalink(get_post($post->ID));
	$tumblr_keys = get_post_custom_keys($post->ID); 
	if ($tumblr_keys) {
  		foreach ($tumblr_keys as $tumblr_key) {
    			if ($tumblr_key == 'TumblrURL') {
      				$tumblr_vals = get_post_custom_values($tumblr_key);
    			}
  		}
  		if ($tumblr_vals) {
			echo $tumblr_vals[0];
  		} else {
    			echo $permalink;
  		}
	} else {
  		echo $permalink;
	}
}

// tumblr-like post titles in feeds @ digwp.com
add_filter('the_permalink_rss', 'tumblrFeedTitles');
function tumblrFeedTitles($permalink) {
	global $wp_query;
	if ($url = get_post_meta($wp_query->post->ID, 'TumblrURL', true)) {
		return $url;
	}
	return $permalink;
}

// link-back for Tumblr-like posts @ digwp.com
add_filter('the_content', 'tumblrLinkBacks');
function tumblrLinkBacks($content) {
	global $wp_query;
	$post_id = get_post($post->ID);
	$posttitle = $post_id->post_title;
	$permalink = get_permalink(get_post($post->ID));
	if (get_post_meta($wp_query->post->ID, 'TumblrURL', true)) {
		$content .= '<p><a href="'.$permalink.'" title="'.$posttitle.'">&#8734;</a></p>';
		return $content;
	} else {
		$content = $content;
		return $content;
	}
}

That’s essentially it. Let’s look at what each of these three functions is doing:

  • tumblrPostTitles — creates the title-link for your tumblelog posts
  • tumblrFeedTitles — creates the title-link for your tumblelog feed items
  • tumblrLinkBacks — creates a link back to your tumbelog post
    (by default, the linkback looks like this: , but you can easily change it to whatever you want)

For more information on what any of these functions are doing, don’t hesitate to ask in the comments.

Step 2: call the functions with their template tags

With the code in place, pop open your single.php and index.php files and replace each of your permalink template tags:

<?php the_permalink(); ?>

..with the new ‘tumblrizing’ template tag:

<?php tumblrPostTitles(); ?>

And that’s pretty much it for this step. We don’t need to add any other new tags because the functions are working automagically behind the scenes to filter the necessary data.

Step 3: make it go by posting a tumblr-style link post

With everything in place, go ahead and post something Tumblr-style. It’s almost too straightforward: give it a title, write a description, and use a custom-field of “TumblrURL” for the URL of the post to which you want to link. Nothing more to it — everything else happens automatically :)

Wrap up

Stay tuned, next time we’ll be following up with a super-easy way to implement a custom-link feed designed to work perfectly with this technique. In that tutorial, you’ll learn how to segregate your link feed from your main posts feed while also delivering a complete “everything-included” feed to give your subscribers exactly what they need.

Happy tumbling! :)

15 Responses

  1. nice info,..
    i like it

  2. Nice tutorial Jeff. Now this looks kind of more easy… I have noticed this style her in DiW… Could it also be possible that if you click the title, it would open in another tab or window and not on the site itself….

    • I think the easiest way to would be to just add target="_blank" to the anchor in your theme file. Something like this in your index.php and single.php files:

      <a href="<?php tumblrPostTitles(); ?>" target="_blank"><?php the_title(); ?></a>

      I’m sure there is a less-obtrusive way of doing this with JavaScript, but it requires a bit more meddling.

      For more info on the blank-target attribute, check out my article here.

  3. i’ll try this tomorrow.. i’ll ask you some questions if there’s something i don’t understand… Nice picture on the post “Star Wars”

  4. This was the one i was thinking when i saw your first tutorial. Bet you would have been laughing if i have told you about this one… I was thinking back then that maybe there was a better way to do this. By using the “custom-field”. Then all of the sudden, you nailed it. Do you have some kind of mind reading other peoples thoughts. Keep it up Jeff………..

  5. Jeff, this is a great walkthrough, thanks! We implemented something similar on our company site a while back.

    I do have to questions: 1) Why not use the_permalink just like you used the_permalink_rss? and 2) Why not use global $post and $post->ID instead of $wp_query->post->ID. I haven’t seen that format before, and was curious what made you choose it.

    Thanks again!

    • If your interested, you could contact me at jn.tongko@gmail.com

      I hope you have an opening on artist………

    • Hi Douglas, that is a good point — I forget if I tried filtering the_permalink or not. It seems like it would work though.

      As for the other, I may end up testing and switching to $post->ID when I have the time. I was in a rush when I implemented this originally, and haven’t taken the time to go back through and optimize everything.

  6. Hi Douglas! Do you need another artist? I mean not digital. Just like in comics. I have a brother who knows how to draw..

  7. Ian M Rountree September 10, 2009

    Very useful – I’m using it now! Although I do have one question; ‘ve noticed that Tumblr-style links for the DigWP feed access their target’s favicons, and do not appear on the site’s main page.

    How do you drop the Tumblr’d links from the main page? I’d guess it would be an omit-category or somesuch, but is there a specific technique you guys use here?

  8. I think our tumblr-style posts do actually appear on the main page. Not sure what you are referring to by “access their target’s favicons,” so I may be missing something here..

    • Ian M Rountree September 13, 2009

      Perhaps it’s a quirk of Firefox’ Live Bookmarks feature, but as an example; there’s a post in the site’s feed for “Setting Up a Simple Backup Process for WordPress” between this post and the next on the main page, Embed an MP3 Widget” – but on the main itself, this article link doesn’t show up.

  9. Ian M Rountree September 14, 2009

    I see where i made the error – I was looking for post titles and the styling of that entry looked at first glance like footer detail for the above post.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry