Why WordPress REST API enables headless usage - See It in Action

Why WordPress REST API enables headless usage

📖 Scenario: You want to build a website where the front-end is separate from WordPress. This means WordPress only manages content, and another tool shows it to users.

🎯 Goal: Learn how WordPress REST API lets you get content from WordPress so you can use it anywhere, like in a React app or mobile app.

📋 What You'll Learn

Create a WordPress REST API endpoint URL variable

Set a variable to store the number of posts to fetch

Write code to fetch posts from the REST API using the URL and number of posts

Add code to display the fetched posts in a simple list format

💡 Why This Matters

🌍 Real World

Many modern websites use WordPress only to manage content. They get this content through the REST API and show it with other tools like React or mobile apps.

💼 Career

Understanding WordPress REST API is useful for developers building headless websites or apps that need content from WordPress but want full control over the front-end.

1

DATA SETUP: Create the REST API endpoint URL

Create a variable called apiUrl and set it to the string 'https://example.com/wp-json/wp/v2/posts' which is the WordPress REST API endpoint for posts.

Wordpress

# Create a variable called apiUrl with the WordPress REST API posts endpoint
# Your code here

Hint

The REST API endpoint URL looks like the website address plus /wp-json/wp/v2/posts.

2

CONFIGURATION: Set the number of posts to fetch

Create a variable called postsCount and set it to the number 5 to limit how many posts to get from the API.

Wordpress

apiUrl = 'https://example.com/wp-json/wp/v2/posts'
# Create a variable postsCount and set it to 5
# Your code here

Hint

Use a simple number variable to control how many posts you want to fetch.

3

CORE LOGIC: Fetch posts from the WordPress REST API

Write code to fetch posts from the REST API using apiUrl and postsCount. Use the URL with a query parameter ?per_page= plus postsCount. Store the result in a variable called posts.

Wordpress

apiUrl = 'https://example.com/wp-json/wp/v2/posts'
postsCount = 5
# Fetch posts from the API and store in posts
# Your code here

Hint

Use string formatting to add ?per_page= and the number to the URL, then fetch it.

4

COMPLETION: Display the fetched posts in a list

Add code to display the fetched posts in a simple list format. For example, create a variable called postList that holds a string with each post title separated by new lines.

Wordpress

apiUrl = 'https://example.com/wp-json/wp/v2/posts'
postsCount = 5
posts = fetch(f"{apiUrl}?per_page={postsCount}")
# Create postList string with post titles separated by new lines
# Your code here

Hint

Use a join on new lines to combine post titles from the posts data.

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