How to Implement Tumblr-Style Links for Posts and Feeds
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.
Overview
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 functions.php
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.'">∞</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 poststumblrFeedTitles– creates the title-link for your tumblelog feed itemstumblrLinkBacks– 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 via their 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: posting tumblr-style link posts
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! :)
About the author
Jeff Starr is a professional web developer and book author with over 15 years of experience. Jeff works with WordPress every day, designing themes, developing plugins, and securing sites. His books include Digging Into WordPress, WordPress Themes In Depth, and The Tao of WordPress.
15 responses
-
inkubisnice info,..
i like it -
BenjieNice 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….
-
Jeff Starr Post AuthorI think the easiest way to would be to just add
target="_blank"to the anchor in your theme file. Something like this in yourindex.phpandsingle.phpfiles:<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.
-
Benjie
Thanks Jeff
-
-
-
Benjie
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”
-
Benjie
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………..
-
Benjie
Hi Douglas! Do you need another artist? I mean not digital. Just like in comics. I have a brother who knows how to draw..
-
Douglas NeinerJeff, 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_permalinkjust like you usedthe_permalink_rss? and 2) Why not use global$postand$post->IDinstead of$wp_query->post->ID. I haven’t seen that format before, and was curious what made you choose it.Thanks again!
-
Benjie
If your interested, you could contact me at jn.tongko@gmail.com
I hope you have an opening on artist………
-
Jeff Starr Post Author
Hi Douglas, that is a good point — I forget if I tried filtering
the_permalinkor not. It seems like it would work though.As for the other, I may end up testing and switching to
$post->IDwhen 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.
-
-
Ian M RountreeVery 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?
-
Jeff Starr Post Author
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
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.
-
Jeff Starr Post Author
I see the post in the main feed, and on the site itself, I am seeing this. Editor’s note: demo link removed
Am I getting any closer?
-
-
-
Ian M Rountree
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.
