Fetch and display remote posts via WordPress REST API

In this article we’ll take a look at how we can fetch some posts from a remote WordPress blog and display them on another WordPress site. For example, you might have two different WordPress websites and write about different topics. But, some topics may be of interest to the readers of both of your blogs. In this case, you might want to offer your readers some posts from the original blog.

Now, I don’t encourage you to duplicate posts from the original to another blog (SEO reasons), but you might want to offer a feed of articles from the original blog, and link them back to the original blog from the second one. And this is exactly what I’ll show you how to do. We’ll create a page template with the feed of articles that will display things like image, title and description, and a link to the original post.

What you’ll need:

So, let’s get started.

Page template for displaying the feed

First, we’ll create a blank page template and give it a name. Create a file inside the root of your WordPress theme. We’ll call it ‘template-page-feed.php‘. Inside the file, you’ll put this code at the very top:

    /**
 * Template Name:Posts Feed
 */

This is the standard way to initialize a blank page template in WordPress and make it available in the template selector inside the page edit screen in WordPress dashboard. So, go ahead and create a new page and set the active template to our new Posts Feed template. If you need some more information on the topic of WordPress page templates, there’s a wealth of information in the official Page Templates article on wordpress.org.

Anyway, after we’ve created our blank page template, it’s time to write some code. Yay!

Some consideration before accessing any REST API

Now, when fetching remote data from a REST API, there’s some performance consideration to take into account. Since we’re displaying our feed when a visitor loads the page, what we don’t want to do, is to make a remote API request on each page load. This would unnecessarily put extra load and could lead to some undesirable behavior on the remote server. Also, in general, many API’s have a rate-limit where you can only make a certain amount of requests before you get locked out (or even billed heftily), so it’s never a good idea to put yourself into a situation where you’re making an unpredictable amount of external API requests.

This is why we’re going to cache our API response.

WordPress transients

A handy way to cache things in WordPress is to use transients. Transients are temporary data stored in a WordPress database that have an expiration date. Now, transients can be deleted automatically even before the expiration date (perhaps through a database maintenance or a similar action), but transient data will never exist after an expiration date. But that should not matter – transients are absolutely not a way to store any critical data, but only the data that can easily and automatically be created over and over again. And this is a perfect solution for our REST API data because it will save us many API calls to our remote site.

So, the first thing we’ll do, before writing our API call, is to check whether we already have a data in our transient. It looks a little bit like this:

    /**
 * Template Name:Posts Feed
 */

define( 'HOURS', 60 * 60 * 12 );
function get_remote_api_data( ) {
 global $apiData; 
    if( empty($apiData) ) $apiInfo = get_transient('api_data'); 
    if( !empty($apiData) ) return $apiData;
}

So, let’s go through this code line by line:

So, the first part revolves around checking if we already have any API data at all, or if we have any API data in our transient. But, what if we don’t? We then make the magic that is called remote API request.

Remote API request

By now we’ve determined we have no previous data in our variable or our transient, and we’re ready to make the call. This is how it’s done:

      $response = wp_remote_get('https://codeart.studio/wp-json/wp/v2/posts?per_page=5&_embed',  array(
      'timeout'     => 20,
  ));
    $data = wp_remote_retrieve_body($response);
    
if( empty($data) ) return false;

    $apiData= json_decode($data);
   
    set_transient( 'api_data', $apiData, HOURS ); 

    return $apiInfo;

Let’s take a look what’s going on in the above code:

So, let’s put together the entire function once more inside a single code block:

    define( 'HOURS', 60 * 60 * 12 );
function get_remote_api_data( ) {
 global $apiData; 
    if( empty($apiData) ) $apiInfo = get_transient('api_data'); 
    if( !empty($apiData) ) return $apiData;

  $response = wp_remote_get('https://codeart.studio/wp-json/wp/v2/posts?per_page=5&_embed',  array(
      'timeout'     => 20,
  ));
    $data = wp_remote_retrieve_body($response);
    
if( empty($data) ) return false;

    $apiData= json_decode($data);
   
    set_transient( 'api_data', $apiData, HOURS ); 

    return $apiInfo;

}

So, now that we have a ready function for making the remote API call, we need to use it, and render our posts.

Rendering the posts from the remote API data

Let’s get our data by using our function and store the data into variables before we render it:

    $feed = get_remote_api_data();
if($feed) : 
foreach($feed as $post) {
    $title= $post->title->rendered;
    $image= $post->_embedded->{'wp:featuredmedia'}[0]->media_details->sizes->{'medium'}->source_url;
    $excerpt= $post->excerpt->rendered;
    $link = $post->link;

Let’s see what we’re doing in the above code block:

A note on the Line 5 – by using the _embedded key, we’re fetching the linked resource, in this case the media for the post, and getting the information we need to create a link to the media (the size and the URL of that image size).

Rendering the posts

Now that we have all the data we need, we’re rendering the post (remember, we’re still inside the foreach loop):

    foreach($feed as $post) {
    $title= $post->title->rendered;
    $image= $post->_embedded->{'wp:featuredmedia'}[0]->media_details->sizes->{'medium'}->source_url;
    $excerpt= $post->excerpt->rendered;
    $link = $post->link;

    $html = '<div class="featuredImage"><a href="'.$link.'"><img src="'.$image.'" /></a></div>'; //the image and the link
    $html .= '<div class="title"><h3><a href="'.$link.'">'.$title.'</a></div></h3>'; //the title and the link
    $html .= '<div class="excerpt">'.$excerpt.'</div>'; //the excerpt

    echo $html;
} //end foreach loop

And, that’s pretty much it. Now you have a loop of posts displayed from a remote website via WordPress REST API. Isn’t that cool?