Comprehensive guide to fetch blog posts API in WordPress when Gutenberg is enabled

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 when Gutenberg is enabled 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 has started to provide web services since its version 4. These web services are very helpful when you want to show 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. Gutenberg uses rest APIs to deal with page and post-management. If we make any changes to the API, it may break the website.

Significance of blog posts API in WordPress when Gutenberg is enabled

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 Gutenberg uses default restful APIs, so we need to create our 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 PHP snippet:

<?php
// blog posts API in WordPress when Gutenberg is enabled
// 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 data keys as per your needs. Here you have successfully written your API to fetch blog posts API in WordPress when Gutenberg is enabled.

Note

Please note that to avoid getting conflicts between existing REST endpoints, we have defined our custom 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 you how many posts you want to fetch. In this way, we can fetch blog posts API in WordPress when Gutenberg is enabled.

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/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 blog-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;
  }
?>

The above code will fetch the blog posts API in WordPress when Gutenberg is 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 (non-Gutenberg) example.