Embed A Tumblr Feed In WordPress
Below is an example showing how to embed multiple Tumblr posts as a feed into a WordPress site. You will need a little coding experience with PHP and access to your WordPress theme files. It is also required to have a Tumblr API key.
1. Get A Tumblr API key
This is required to use Tumblr’s API for requests. In this case, we will be using it to fetch the latest posts from a Tumblr user. You can visit here to set up an APP and retrieve your API key.
2. Set Up Your Shortcode
A shortcode is a simple WordPress snippet that you can pop into the page/post editor to place some code, make a query, or anything else you could possibly want. Today, we are going to fetch Tumblr posts with PHP and place them in the site.
Editing the functions.php file of your WordPress theme, place this code at the bottom before the PHP end tag:
function new_tumblr_func( $atts ){
ob_start(); //THIS STARTS YOUR SHORTCODE OUTPUT
$apikey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // PLACE YOUR API KEY
$limit = 5; // HOW MANY POSTS DO YOU WANT
$tumblr = "yourURL.tumblr.com"; // THE TUMBLR URL YOU ARE GETTING POSTS FROM
$apidata = json_decode(file_get_contents("http://api.tumblr.com/v2/blog/$tumblr/posts?api_key=$apikey&limit=$limit"));
$mypostsdata = $apidata->response->posts;
$myposts = array();
foreach($mypostsdata as $postdata) {
echo wp_oembed_get( $postdata->post_url );
}
$output_string = ob_get_contents();
ob_end_clean();
return $output_string;
}
add_shortcode( 'tumblr-feed', 'new_tumblr_func' );
Let’s talk a little about what is happening here.
There are 3 variables you need to define at the beginning of the code:
- Your API key
- The amount of posts you want
- The Tumblr URL of the posts you want
The code will then fetch those posts and return them in JSON format. In your foreach loop, you could cycle through each one of those objects in the array and pull any information you would need from each post. In this case, I only want the post URL.
I only want the post URL because I am going to use a very handy function from WordPress to do the hard work for me. Instead of figuring out whether each post is a link, a video, a photo, an embed, and then trying to format the HTML for each one, I will use what WordPress already provides, the oEmbed function. That functionality takes whatever URL you paste in your WordPress text editor and then tries to find the embed code for it and place it within your content.
WordPress also provides a function to initiate this feature however you please: wp_embed_get();
So for this line of code:
echo wp_oembed_get( $postdata->post_url );
we are just looping through each returned Tumblr post via JSON, and running it through the WordPress embed function wp_embed_get().
3. Place your shortcode where you want the feed
By adding the line below, you will call the function we placed in our functions.php file, and it will place it where the shortcode was used.
[tumblr-feed]
This shortcode can be placed anywhere on a page, post, or custom post type in the content editor.
You can customize a lot of the functionality to suit your needs, but hopefully this gets you started working with the Tumblr API and the many ways you can dynamically call Tumblr content on your WordPress site.
Credit
I want to credit @groovycarrot for his post describing how to first work with the Tumblr API in PHP which inspired the idea.