Fetch blog posts API in WordPress when Gutenberg is enabled

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 when Gutenberg is enabled on a non-WordPress website when Gutenberg is enabled. Gutenberg uses rest APIs to deal with page and post-management. If we make any changes to API, it may break the 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 Gutenberg uses default restful APIs, so we need to create our own custom endpoint. Otherwise, it will conflict and may break the Gutenberg functionality.

Activate blog posts API in WordPress when Gutenberg is enabled

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

<?php
// get posts
  function w3_get_post_items() {
    // get published posts only
    $args = array (
      'post_status' => 'publish'
    );
   
    $items = array();
    
    // check if posts exists
    if ( $posts = get_posts( $args ) ) {
      // iterate through the posts
      foreach ( $posts as $post ) {
        $items[] = array(
          'id' => $post->ID, // get post IP
          'date_day' => date('F d, Y', strtotime($post->post_date)), // post date
          'title' => $post->post_title, // post title
          'excerpt' => $post->post_excerpt, // post excerpt
          'image' => wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ), // image URL
          'category' => get_the_category_by_ID( get_the_category($post->ID)), // ctaegory title
          'link' => get_permalink($post->ID), // post URL
          'author' => get_the_author_meta( 'display_name', $post->post_author ), // author name
          'content' => apply_filters( 'the_content', $post->post_content ), // post content
        );
      }
    }
    return $items;
  }

// create custom endpoint for posts API and pass callback function
  function w3_register_api_endpoints() {
    register_rest_route( 'site/v2', '/posts', array(
      'methods' => 'GET',
      'callback' => 'w3_get_post_items',
    ) );
  }

// add action to rest APIs
  add_action( 'rest_api_init', 'w3_register_api_endpoints' );
?>

You can add more keys as per your need.

Note:

Please note that to avoid getting conflicts between existing rest endpoints, we defined our own endpoint. The Gutenberg uses a default rest endpoint so we can not use it otherwise it will add conflicts. In the above snippet, the following endpoint will be registered:

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

The per_page will tell how many posts you want to fetch.

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/site/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/site/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 (non-Gutenberg) example.