WordPress REST API Tutorial: Connect WordPress to React

Headless WordPress with React

Headless WordPress uses WordPress as a content management backend (CMS) while a separate JavaScript frontend (React, Next.js, Vue) handles the display. The WordPress REST API exposes all content via JSON endpoints at /wp-json/wp/v2/. This approach combines WordPress's excellent content editing experience with the performance and flexibility of a modern JavaScript frontend.

WordPress REST API Endpoints

The core REST API provides endpoints for posts (/wp-json/wp/v2/posts), pages (/wp-json/wp/v2/pages), categories (/wp-json/wp/v2/categories), tags (/wp-json/wp/v2/tags), media (/wp-json/wp/v2/media), and users (/wp-json/wp/v2/users). Fetch with query parameters: ?per_page=10&page=2&categories=5&_embed (to include featured images and author data in the response).

Fetching WordPress Data in React

Use fetch() or Axios in your React application to call WordPress REST API endpoints. With Next.js, fetch post data in Server Components or getStaticProps: const posts = await fetch('https://yourwpsite.com/wp-json/wp/v2/posts?per_page=12').then(r => r.json()). Cache aggressively — most WordPress content doesn't change frequently. Use ISR (revalidate: 3600) to regenerate pages hourly.

Custom Post Types in the REST API

Enable REST API support for your custom post types by setting show_in_rest: true in register_post_type(). Your CPT becomes available at /wp-json/wp/v2/{post-type-slug}. To expose ACF custom fields, install the ACF to REST API plugin or register fields manually with register_rest_field(). This makes your CPT data, including custom fields, available to your React frontend.

Authentication for Protected Endpoints

Public REST endpoints (reading published posts) require no authentication. Protected endpoints (creating posts, accessing draft content, updating settings) require authentication. The simplest approach is Application Passwords (built into WordPress since 5.6): generate an application password for a WordPress user, and pass it as a Basic Auth header: Authorization: Basic base64(username:app-password).

Performance Considerations

The WordPress REST API can be slow without optimization — each request goes to PHP, queries the database, and serializes the response. Add a full-page caching plugin (WP Rocket, LiteSpeed Cache) that caches REST API responses. Use a CDN (Cloudflare) in front of your WordPress site. Consider GraphQL via WPGraphQL plugin for more efficient queries — request exactly the fields you need rather than the full REST API response.