How to get all WordPress posts from the Custom REST API with JavaScript? Step by Step

How to get all WordPress posts from the Custom REST API with JavaScript? Step by Step

JavaScript is one the most popular Scripting Language among frontend Developer and Backend too.

Because of its popularity there were a number of libraries introduced. In this post i am going to write about the WordPress  REST API and  how to fetch WordPress Posts using JavaScript.

Hope, you are well known about REST API , if you do not know don’t worry check this link which will guide you step by step How to create Custom REST API in WordPress? 

After creating the Custom REST API in WordPress, you are ready to take action, so let’s do it now step-by-step.

Step 1: Create HTML File 

To fetch WordPress Posts, first, we need to mention or create a file in your project. For Demo purposes, I am going to create a separate HTML file like this.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get all WordPress Posts</title>
</head>

<body>

</body>

</html>

Step 2: Link JavaScript and CSS

We have to link CSS and JavaScript links. In this demo, I am going to use Bootstrap and Alpine.js so link them at the <head>.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
    <title>Get all WordPress Posts</title>
</head>

<body>

</body>

</html>

Step 3: JavaScript and Alpine.js 

After the linking CDN  the actual code starts, we have to use alpine.js for templating.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
    <title>Get all WordPress Posts</title>
</head>

<body>
    <script>
        function setup() {
            return {
                url: 'https://engineerjagat.com/wp-json/ps/v1/posts',
                posts: [],
                fetchData() {
                    fetch(this.url)
                        .then(response => response.json())
                        .then(data => this.posts = data)
                }
            }
        }
    </script>
    <div x-data="setup()" x-init="fetchData()" class="container">
        <div class="row">
            <template x-for="post in posts">
                <div class="col-md-4">
                    <div class="card mb-4">
                        <img class="card-img-top" :src="post.featured_image.large" :alt="post.title">
                        <div class="card-body">
                            <a class="card-title" :href="post.permalink" x-text="post.title"></a>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</body>

</html>

 




Copyright © 2020-2021 Engineer Jagat All rights reserved. Developed by Ravindra Rana