Comprehensive guide to fetch blog posts API in WordPress (non-Gutenberg)

In the web development journey, you might want to fetch blog posts from the WordPress site and display them on another website. The good thing is, that the blog posts API in WordPress is available. That means you can now display the blog posts of a WordPress site on another custom website that you might have a built-in core or native PHP stack.

Introduction

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 non-WordPress website, 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 PHP 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 data keys as per your needs. Here you have successfully written your API to fetch blog posts API in WordPress when Gutenberg is not enabled.

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 the API, it may break the website. We will cover the blog posts API in WordPress while Gutenberg is enabled, in the article here.

Target PHP (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;
  }
?>

The above code will fetch the blog posts API in WordPress when Gutenberg is not enabled.

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

Testing and Optimization: Ensuring Smooth Performance

Before deploying your APIs, thoroughly test their functionality. Ensure it works seamlessly across different browsers and devices. In your custom website, handle the exceptions using the try-catch block. Optimize the code for performance, addressing any potential issues.

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