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

Need a 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

Need a 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

Need a 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

Need a hint?

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