Fetch blog posts API in WordPress (non-Gutenberg)

WordPress started to provide web services in version 4. These web services are very helpful when you want to take data from a WordPress site (e.g. blog or shop) and integrate it into another website. In this article, we will see how to fetch blog posts API in WordPress into a non-WordPress website.

The purpose of using WordPress APIs is not limited to the following only but can be used in many different ways. However, the most common uses are:

1. Display products in the mobile app
2. Display blog posts on another website

This tutorial will guide you on how to show blog posts from your WordPress site to another website that is non-WordPress, dynamically.

When we do dynamic integration, we will get the latest posts and we don’t have to change them manually on other websites. The default URL for web services for posts for blogs is:

https://www.your-site.com/wp-json/wp/v2/posts?per_page=3

The per_page is a parameter that you can set according to the number of posts you want to fetch (in our case it is set to 3 i.e. it will fetch the latest 3 posts only).

Activate blog posts API in WordPress

To activate the blog post API in WordPress, open functions.php of your child theme and add the following snippet:

<?php
  // custom function to fetch all posts
  function w3_get_all_posts( $data, $post, $context ) {
    return [
      'id'       => $data->data['id'], // post ID
      'date'     => date('F d, Y', strtotime($data->data['date'])), // post date
      'title'    => $data->data['title']['rendered'], // post title
      'content'  => $data->data['content']['rendered'], // post content
      'excerpt'  => $data->data['excerpt']['rendered'], // post excerpt
      'image'    => wp_get_attachment_image_src($data->data['featured_media'], 'original')[0], // get image URL
      'category' => get_the_category_by_ID( $data->data['categories'][0] ), // get category name
      'link'     => $data->data['link'], // post URL
    ];
  }

  // register the filter
  add_filter( 'rest_prepare_post', 'w3_get_all_posts', 10, 3 );
?>

You can add more keys as per your need.

Note:

Please note that the above snippet will not work properly if Gutenberg is enabled. The reason is that Gutenberg uses rest APIs to deal with page and post-management. If we make any changes to API, it may break the website. We will cover the blog posts API in WordPress while Gutenberg is enabled, in the article here.

Target (non-WordPress) website integration

Now, go to your website where you need to display the posts.

The following script will fetch content from API and will store it in $json variable:

<?php
  // API endpoint
  $json = file_get_contents("https://www.your-site.com/wp-json/wp/v2/posts?per_page=3");
?>

The API endpoint will return data in JSON format and we can get the data using the file_get_content() function.

The full code to fetch content from the posts API is:

<?php
  // get dynamic blogs from WordPress
  $json = file_get_contents("https://www.your-site.com/wp-json/wp/v2/posts?per_page=3");

  // Convert the JSON to an array of posts
  $posts = json_decode($json);

  // iterate through each post
  foreach ($posts as $p) {
    echo 'URL: '.$p->link.'<br>';
    echo 'Category: '.$p->category.'<br>';
    echo 'Title: '.$p->title.'<br>';
    echo 'Image: '.$p->image.'<br>';
    echo 'Content: '.$p->content.'<br>';
    echo 'Excerpt: '.$p->excerpt.'<br>';
    echo 'Date: '.$p->date;
  }
?>

You can create your own HTML and apply the necessary CSS stylings as per your layout.

In the next article, we will see how to enable blog posts API in WordPress when Gutenberg is enabled.