Why WordPress REST API enables headless usage - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch posts using the WordPress REST API.

Wordpress

fetch('[1]/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => console.log(data));

Drag options to blanks, or click blank then click option'

Ahttps://example.com

Bfile://localhost

Cftp://example.com

Dhttp://localhost

Attempts:

3 left

💡 Hint

Common Mistakes

Using unsupported protocols like ftp or file.

Omitting the site URL before the API path.

The WordPress REST API endpoint starts with the site URL followed by /wp-json/wp/v2/posts to fetch posts.

2fill in blank

medium

Complete the code to display the title of the first post from the REST API response.

Wordpress

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

Drag options to blanks, or click blank then click option'

A-1

B1

C0

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 as the first index, which skips the first post.

Using negative or invalid indexes.

Arrays in JavaScript start at index 0, so the first post is at posts[0].

3fill in blank

hard

Fix the error in the code to correctly fetch and log the post titles.

Wordpress

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

Drag options to blanks, or click blank then click option'

Axml

Bjson

Ctext

Dhtml

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() which returns raw text, not parsed JSON.

Using unsupported formats like XML or HTML.

The response must be converted to JSON using response.json() to access the data as JavaScript objects.

4fill in blank

hard

Fill both blanks to create a React component that fetches and displays post titles from the WordPress REST API.

Wordpress

import React, { useState, useEffect } from 'react';

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('[1]/wp-json/wp/v2/posts')
      .then(response => response.[2]())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title.rendered}</li>)}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

Ahttps://myblog.com

Btext

Cjson

Dhttp://api.example.com

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect URLs that don't point to the WordPress site.

Parsing response with text() instead of json().

The component fetches posts from the WordPress REST API URL and parses the response as JSON before setting state.

5fill in blank

hard

Fill all three blanks to create a JavaScript function that fetches posts, filters by category ID 5, and logs the titles.

Wordpress

async function fetchCategoryPosts() {
  const response = await fetch('[1]/wp-json/wp/v2/posts?categories=[2]');
  const posts = await response.[3]();
  posts.forEach(post => console.log(post.title.rendered));
}

Drag options to blanks, or click blank then click option'

Ahttps://site.example

B5

Cjson

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong category IDs or missing the query parameter.

Not parsing the response as JSON.

Using incorrect URLs.

The function fetches posts from the WordPress REST API filtered by category ID 5 and parses the response as JSON.

Practice

1. What is the main reason the WordPress REST API enables headless usage?

easy

A. It disables external applications from accessing content.

B. It requires using WordPress themes for content display.

C. It allows access to WordPress content without relying on themes.

D. It only works with WordPress plugins.

Solution

1. Step 1: Understand headless usage concept

   Headless means separating content management from how content is shown.

2. Step 2: Identify REST API role

   The REST API lets apps get content data without using WordPress themes for display.

3. Final Answer:

   It allows access to WordPress content without relying on themes. -> Option C

4. Quick Check:

   Headless = Access content without themes [OK]

Hint: Headless means content separate from display [OK]

Common Mistakes:

• Thinking themes are required to use REST API
• Believing REST API blocks external access
• Confusing plugins with REST API purpose

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

easy

A. POST /wp-admin/wp-json/posts

B. POST /wp-json/wp/v2/posts

C. GET /wp-admin/posts

D. GET /wp-json/wp/v2/posts

Solution

1. Step 1: Identify REST API method for fetching data

   Fetching data uses GET requests, not POST.

2. Step 2: Check correct REST API endpoint format

   The standard posts endpoint is /wp-json/wp/v2/posts.

3. Final Answer:

   GET /wp-json/wp/v2/posts -> Option D

4. Quick Check:

   GET + /wp-json/wp/v2/posts = Correct fetch [OK]

Hint: GET method fetches data from /wp-json/wp/v2/posts [OK]

Common Mistakes:

• Using POST instead of GET to fetch posts
• Using admin URLs instead of REST API endpoints
• Mixing endpoint paths incorrectly

3. What will be the output when a React app fetches data from WordPress REST API endpoint /wp-json/wp/v2/posts and renders the titles of posts?

medium

A. Empty page because REST API returns no data.

B. A list of post titles from WordPress content.

C. An error message about missing theme.

D. WordPress admin dashboard interface.

Solution

1. Step 1: Understand REST API data response

   The endpoint returns JSON data with posts including titles.

2. Step 2: React app renders fetched titles

   React uses this data to show a list of post titles on screen.

3. Final Answer:

   A list of post titles from WordPress content. -> Option B

4. Quick Check:

   REST API data + React render = Post titles list [OK]

Hint: REST API returns JSON data React can render [OK]

Common Mistakes:

• Expecting WordPress theme output instead of JSON
• Assuming REST API returns empty without setup
• Confusing admin dashboard with API data

4. A developer tries to fetch posts from /wp-json/wp/v2/post but gets a 404 error. What is the likely cause?

medium

A. The endpoint path is incorrect; it should be /wp-json/wp/v2/posts.

B. The REST API is disabled in WordPress settings.

C. The developer used POST method instead of GET.

D. WordPress themes are missing causing API failure.

Solution

1. Step 1: Check endpoint spelling

   The correct posts endpoint uses plural 'posts', not 'post'.

2. Step 2: Understand 404 error meaning

   404 means the URL does not exist, likely due to wrong path.

3. Final Answer:

   The endpoint path is incorrect; it should be /wp-json/wp/v2/posts. -> Option A

4. Quick Check:

   404 error + wrong endpoint = fix URL [OK]

Hint: Check plural form in REST API endpoint URL [OK]

Common Mistakes:

• Using singular 'post' instead of 'posts'
• Assuming REST API is disabled without checking URL
• Blaming themes for API endpoint errors

5. How does using the WordPress REST API help build a mobile app that shows blog posts without using WordPress themes?

hard

A. It provides JSON data of posts that the app can display with its own design.

B. It forces the app to use WordPress theme templates for display.

C. It disables content access outside WordPress admin panel.

D. It requires installing special plugins to export posts.

Solution

1. Step 1: Understand REST API data format

   The API sends content as JSON, a simple data format apps can use.

2. Step 2: Recognize app design independence

   The mobile app can use this data to show posts in its own style, no themes needed.

3. Step 3: Confirm no plugin or theme dependency

   REST API is built-in and does not require extra plugins or themes for data access.

4. Final Answer:

   It provides JSON data of posts that the app can display with its own design. -> Option A

5. Quick Check:

   REST API JSON + app design freedom = Headless usage [OK]

Hint: REST API sends JSON; app controls display style [OK]

Common Mistakes:

• Thinking WordPress themes must be used in apps
• Believing plugins are needed to export posts
• Assuming content is locked inside WordPress admin