Headless WordPress for Developers

Headless WordPress separates the back-end (WordPress) from the front-end, allowing developers to use modern frameworks like React, Vue, or Angular for the front-end. This guide will walk you through setting up a headless WordPress site.

Step 1: Setting Up Your WordPress Site

  1. Install WordPress: Set up a new WordPress site. You can do this locally using tools like XAMPP or MAMP, or on a live server.
  2. Permalink Settings: Go to Settings > Permalinks and set to Post name.
  3. Install Plugins:
  • WP REST API: This is included by default in WordPress 4.7 and above.
  • ACF (Advanced Custom Fields): Optional, for adding custom fields.

Step 2: Fetch Data from WordPress REST API

The WordPress REST API provides endpoints to retrieve posts, pages, and other content types in JSON format.

Example: Fetching Posts

GET https://yourwebsite.com/wp-json/wp/v2/posts

You can test this in your browser or using tools like Postman.

Step 3: Setting Up a Front-End Framework

For this example, we’ll use React.

  1. Create a React App:
npx create-react-app headless-wp
cd headless-wp
  1. Install Axios for API Requests:
npm install axios
  1. Fetch Data in React:

Create a new file src/components/Posts.js and add the following code:

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

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

  useEffect(() => {
    axios.get('https://yourwebsite.com/wp-json/wp/v2/posts')
      .then(response => {
        setPosts(response.data);
      })
      .catch(error => console.error('Error fetching posts:', error));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title.rendered}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
        </div>
      ))}
    </div>
  );
};

export default Posts;
  1. Use the Posts Component:

In src/App.js, import and use the Posts component:

import React from 'react';
import Posts from './components/Posts';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Headless WordPress</h1>
      </header>
      <Posts />
    </div>
  );
}

export default App;
  1. Run Your React App:
npm start

Step 4: Advanced Custom Fields (Optional)

If you’re using ACF, you can fetch custom fields in the REST API by adding the following to your functions.php:

function my_acf_to_rest_api($response, $post, $request) {
    if (!function_exists('get_fields')) return $response;

    if ($fields = get_fields($post->id)) {
        $response->data['custom_fields'] = $fields;
    }

    return $response;
}
add_filter('rest_prepare_post', 'my_acf_to_rest_api', 10, 3);

Now, the custom fields will be included in the JSON response.

Step 5: Deployment

Deploy your WordPress backend and React frontend to your preferred hosting services. Ensure that CORS (Cross-Origin Resource Sharing) is configured properly if your backend and frontend are hosted on different domains.

Conclusion

With these steps, you have set up a headless WordPress site with a React front-end. This architecture allows you to leverage the robust content management capabilities of WordPress while utilizing modern JavaScript frameworks for a dynamic and responsive user experience.

Feel free to ask if you need any specific customizations or have additional questions!

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending