Default API endpoints in Wordpress - Mini Project: Build & Apply

Default API Endpoints in WordPress

📖 Scenario: You are building a simple WordPress site that needs to show posts and pages data using the default WordPress REST API endpoints.

🎯 Goal: Learn how to access and use the default WordPress REST API endpoints to fetch posts and pages data.

📋 What You'll Learn

Create a variable to store the base URL of the WordPress REST API

Create a variable to store the endpoint for fetching posts

Use the fetch API to get posts data from the posts endpoint

Add the final fetch call for pages endpoint

💡 Why This Matters

🌍 Real World

WordPress sites often expose content via REST API endpoints. Knowing how to access these endpoints helps you build custom frontends or integrations.

💼 Career

Many web developer roles require fetching and displaying WordPress content using its REST API, making this knowledge practical and valuable.

1

Set up the base API URL

Create a variable called apiBaseUrl and set it to the string "https://example.com/wp-json/wp/v2" which is the base URL for WordPress REST API.

Wordpress

# Create a variable called apiBaseUrl and set it to "https://example.com/wp-json/wp/v2"
# Your code here

Need a hint?

The base URL for WordPress REST API usually ends with /wp-json/wp/v2.

2

Create posts endpoint URL

Create a variable called postsEndpoint and set it to the posts endpoint by combining apiBaseUrl with "/posts".

Wordpress

const apiBaseUrl = "https://example.com/wp-json/wp/v2";
# Create a variable postsEndpoint by adding "/posts" to apiBaseUrl
# Your code here

Need a hint?

Use string concatenation to add /posts to the base URL.

3

Fetch posts data

Use the fetch function to get data from postsEndpoint. Create a variable called postsData and assign it the result of await fetch(postsEndpoint).

Wordpress

const apiBaseUrl = "https://example.com/wp-json/wp/v2";
const postsEndpoint = apiBaseUrl + "/posts";
// Use fetch to get posts data and assign to postsData
// Your code here

Need a hint?

Remember to use await with fetch to wait for the response.

4

Fetch pages data

Create a variable called pagesEndpoint by adding "/pages" to apiBaseUrl. Then use fetch to get data from pagesEndpoint and assign it to a variable called pagesData.

Wordpress

const apiBaseUrl = "https://example.com/wp-json/wp/v2";
const postsEndpoint = apiBaseUrl + "/posts";
const postsData = await fetch(postsEndpoint);
// Create pagesEndpoint and fetch pagesData
// Your code here

Need a hint?

Follow the same pattern as posts to get pages data.