How to Embed WordPress Posts in any website Using REST API

Sometimes we come across the need to show a blog section on our website without actually installing a CMS or Blogging Application.

In that case, we can embed Posts in our website from any WordPress website using a hack called REST API.

In this article, we’re going to discuss how we can easily embed blog posts in our PHP website from a WordPress website.

The WordPress REST API provides an interface for applications to interact with your WordPress site by sending and receiving data as JSON (JavaScript Object Notation) objects.

Source – WordPress.org

What is REST API?

REST stands for REpresentational State Transfer & API stands for Application Programming Interface.

So, when combined, a REST API provides a way to interact(Read, Write, Update & Delete) with any web application via Request and Response Endpoints.

Understanding Requests & Responses

In simple words, when you open a website in a browser, you’re sending an HTTP request to the Server. The server receives it and returns an HTML file in response that is decoded and displayed in the browser window.

Request Endpoint in WordPress

Each WordPress website by default has the REST API enabled.

To check that, you can simply open the website URL followed by /wp-json/ and it will return an ugly JSON object

For Example, if you open https://itgiggs.in/wp-json, there you’ll see a very long and messy code.

Response from a WordPress REST API

The code you see is nothing but a JSON string that can be easily converted into an array and can be further used to get what is required.

Code Example to Embed Latest 3 Posts from any WordPress website

<?php $blog_url = 'https://example.com/blog';
       $rest = file_get_contents($blog_url.'/wp-json/wp/v2/posts?per_page=3') ; 
       $posts = json_decode($rest);
       if(!empty($posts)){
       foreach($posts as $post){
        $title = $post->title->rendered;
        $excerpt = $post->excerpt->rendered;
        $permalink = $post->link;
        $thumbnail_id = $post->featured_media;
        $media_data = file_get_contents($blog_url.'/wp-json/wp/v2/media/'.$thumbnail_id); 
        $media_arr = json_decode($media_data);
        $thumbnail_url = $media_arr->guid->rendered;
           ?>

        <div class="col-md-4">
            <div class="p-4">
                <img src="<?php echo $thumbnail_url; ?>" class="img-fluid" >
                
                <h2 class="h4">
                    <a href="<?php echo $permalink; ?>" target="_blank"><?php echo $title; ?></a>
                </h2>
                <p><?php echo $excerpt; ?></p>
              
            </div>
        </div>

           <?php
       } }
       else {
           echo '<center>No Posts Found</center>';
       }
       ?>

You May Also Like