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
- Install WordPress: Set up a new WordPress site. You can do this locally using tools like XAMPP or MAMP, or on a live server.
- Permalink Settings: Go to
Settings > Permalinks
and set toPost name
. - 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.
- Create a React App:
npx create-react-app headless-wp
cd headless-wp
- Install Axios for API Requests:
npm install axios
- 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;
- 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;
- 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