REST API with JavaScript in Wordpress

Introduction

A REST API lets your JavaScript code talk to a server to get or send data. This helps your website or app show fresh information without reloading the page.

You want to show the latest blog posts on your site without refreshing.

You need to save user comments or form data to your website.

You want to load images or products dynamically as users browse.

You want to update parts of your page based on user actions.

You want to connect your site to other services or apps.

Syntax

Wordpress

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => {
    // use the data here
  })
  .catch(error => console.error('Error:', error));

Use fetch to call the REST API URL and get data.

Always handle errors with catch to avoid crashes.

Examples

Get all posts and print them in the browser console.

Wordpress

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(res => res.json())
  .then(posts => console.log(posts));

Get a single post by ID and show its title.

Wordpress

fetch('https://example.com/wp-json/wp/v2/posts/1')
  .then(res => res.json())
  .then(post => console.log(post.title.rendered));

Create a new post by sending data to the API.

Wordpress

fetch('https://example.com/wp-json/wp/v2/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'New Post', content: 'Hello world!' })
})
.then(res => res.json())
.then(data => console.log('Created:', data));

Sample Program

This code fetches the latest blog posts from a WordPress REST API and prints the title of the newest post in the console. It uses modern async/await syntax for clarity and error handling.

Wordpress

const apiUrl = 'https://demo.wp-api.org/wp-json/wp/v2/posts';

async function showLatestPost() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) throw new Error('Network response was not ok');
    const posts = await response.json();
    const latest = posts[0];
    console.log(`Latest post title: ${latest.title.rendered}`);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

showLatestPost();

Important Notes

Always check if the API URL is correct and accessible.

Use async/await for cleaner and easier-to-read code.

Remember to handle errors to keep your app stable.

Summary

REST API lets JavaScript get or send data to a server without reloading the page.

Use fetch with the WordPress REST API URLs to work with posts, pages, and more.

Handle errors and use async/await for better code.

Practice

1. What is the main purpose of using the WordPress REST API with JavaScript?

easy

A. To get or send data to the WordPress server without reloading the page

B. To change the WordPress theme colors

C. To install WordPress plugins automatically

D. To create new WordPress users manually

Solution

1. Step 1: Understand REST API role

   The REST API allows JavaScript to communicate with the server asynchronously.

2. Step 2: Identify the purpose in WordPress context

   It is used to get or send data like posts or pages without reloading the page.

3. Final Answer:

   To get or send data to the WordPress server without reloading the page -> Option A

4. Quick Check:

   REST API = Data exchange without reload [OK]

Hint: REST API means data exchange without page reload [OK]

Common Mistakes:

• Thinking REST API changes themes or plugins
• Confusing REST API with WordPress admin tasks
• Assuming REST API reloads the page

2. Which of the following is the correct way to fetch posts from the WordPress REST API using JavaScript?

easy

A. fetch('/wp-json/wp/v2/posts').then(response => response.json())

B. fetch('wp-json/wp/v2/posts').json()

C. fetch('/wp-json/wp/v2/posts').json()

D. fetch('/wp-json/wp/v2/posts').then(response => response.text())

Solution

1. Step 1: Check fetch URL format

   The URL must start with a slash '/' to indicate root path: '/wp-json/wp/v2/posts'.

2. Step 2: Use correct response method

   Use response.json() inside a then() to parse JSON data correctly.

3. Final Answer:

   fetch('/wp-json/wp/v2/posts').then(response => response.json()) -> Option A

4. Quick Check:

   fetch + .then + response.json() = correct syntax [OK]

Hint: Use .then(response => response.json()) after fetch [OK]

Common Mistakes:

• Missing leading slash in URL
• Calling .json() directly on fetch without then
• Using response.text() instead of response.json()

3. What will the following code output if the REST API returns two posts with titles 'Hello' and 'World'?

fetch('/wp-json/wp/v2/posts')
  .then(res => res.json())
  .then(posts => {
    posts.forEach(post => console.log(post.title.rendered));
  });

medium

A. undefined\nundefined

B. posts.forEach is not a function

C. Hello\nWorld

D. Error: Cannot read property 'rendered' of undefined

Solution

1. Step 1: Understand fetch and JSON parsing

   The fetch gets posts, then res.json() parses the JSON array of posts.

2. Step 2: Loop through posts and log titles

   posts.forEach logs each post's title.rendered, so it prints 'Hello' and 'World'.

3. Final Answer:

   Hello\nWorld -> Option C

4. Quick Check:

   posts.forEach + post.title.rendered = Hello and World [OK]

Hint: Use console.log inside forEach to print each post title [OK]

Common Mistakes:

• Assuming posts is not an array
• Forgetting to parse JSON with res.json()
• Accessing title without .rendered property

4. Identify the error in this code snippet that tries to fetch pages from WordPress REST API:

async function getPages() {
  const response = await fetch('wp-json/wp/v2/pages');
  const data = await response.json;
  console.log(data);
}

medium

A. The function should not be async

B. The fetch URL is missing a leading slash '/' and response.json is missing parentheses

C. console.log should be before fetch call

D. response.json should be replaced with response.text

Solution

1. Step 1: Check fetch URL format

   The URL 'wp-json/wp/v2/pages' is missing a leading slash '/' which is required for root-relative path.

2. Step 2: Check response.json usage

   response.json is a function and must be called with parentheses: response.json()

3. Final Answer:

   The fetch URL is missing a leading slash '/' and response.json is missing parentheses -> Option B

4. Quick Check:

   URL slash + response.json() needed [OK]

Hint: Always add '/' before REST API path and call .json() as function [OK]

Common Mistakes:

• Forgetting parentheses on response.json
• Missing leading slash in URL
• Misplacing console.log before data is fetched

5. You want to fetch posts and display only those with the word 'JavaScript' in the title using async/await. Which code correctly filters and logs these posts?

hard

A. async function fetchJSPosts() {
const res = await fetch('/wp-json/wp/v2/posts');
const posts = await res.text();
const filtered = posts.filter(post => post.title.rendered.includes('JavaScript'));
filtered.forEach(post => console.log(post.title.rendered));
}

B. async function fetchJSPosts() {
const res = await fetch('/wp-json/wp/v2/posts');
const posts = await res.json;
const filtered = posts.filter(post => post.title.includes('JavaScript'));
filtered.forEach(post => console.log(post.title.rendered));
}

C. async function fetchJSPosts() {
const res = await fetch('/wp-json/wp/v2/posts');
const posts = await res.json();
const filtered = posts.filter(post => post.title.rendered == 'JavaScript');
filtered.forEach(post => console.log(post.title.rendered));
}

D. async function fetchJSPosts() {
const res = await fetch('/wp-json/wp/v2/posts');
const posts = await res.json();
const filtered = posts.filter(post => post.title.rendered.includes('JavaScript'));
filtered.forEach(post => console.log(post.title.rendered));
}

Solution

1. Step 1: Correctly fetch and parse JSON

   Use await res.json() to parse the response as JSON array of posts.

2. Step 2: Filter posts by checking if title.rendered includes 'JavaScript'

   Use posts.filter with post.title.rendered.includes('JavaScript') to select matching posts.

3. Step 3: Log filtered post titles

   Use forEach to log each filtered post's title.rendered.

4. Final Answer:

   async function fetchJSPosts() { const res = await fetch('/wp-json/wp/v2/posts'); const posts = await res.json(); const filtered = posts.filter(post => post.title.rendered.includes('JavaScript')); filtered.forEach(post => console.log(post.title.rendered)); } -> Option D

5. Quick Check:

   await fetch + .json() + filter + includes = async function fetchJSPosts() { const res = await fetch('/wp-json/wp/v2/posts'); const posts = await res.json(); const filtered = posts.filter(post => post.title.rendered.includes('JavaScript')); filtered.forEach(post => console.log(post.title.rendered)); } [OK]

Hint: Use .json() and filter with includes() on title.rendered [OK]

Common Mistakes:

• Forgetting parentheses on json()
• Using == instead of includes for substring
• Parsing response as text instead of JSON