Fetching Data from ACF Fields to Front-End Application via REST API

Hello! I’m Arun, a WordPress developer, and I often work with different technologies, including WordPress and various frontend frameworks. Today, I want to share an essential part of building a headless application with WordPress—fetching data from ACF fields through the REST API.

Many of you may already know that in a headless setup, the backend and frontend communicate through APIs. Here, I’ll guide you through getting data from ACF (Advanced Custom Fields) in WordPress and enabling this data access via the REST API, so you can fetch it on the frontend. I’ll be working with a sample blog to demonstrate this setup.

We’ll accomplish this in three steps:

1. Enable the REST API for ACF fields.
2. Check the API Route
3. Fetch the data using React on the frontend.

Step 1: Enabling the REST API for ACF Fields in WordPress

To start, we need to enable REST API access for ACF fields in the WordPress backend.

1. Go to the functions.php file in your WordPress theme directory.
2. Add the following code to allow REST API access for ACF fields

functions.php

function expose_acf_fields_in_rest_api( $response, $post, $request ) {
    if( function_exists('get_fields') ) {
        $acf_fields = get_fields( $post->ID );
        if( $acf_fields ) {
            $response->data['acf'] = $acf_fields;
        }
    }
    return $response;
}
//add your custom post type in [ front-end ]
add_filter( 'rest_prepare_front-end', 'expose_acf_fields_in_rest_api', 10, 3 );
add_filter('acf/rest_api/field_settings/show_in_rest', '__return_true');        

This code snippet makes ACF fields accessible through the REST API, allowing you to fetch them from the frontend.

Step 2: Check the API Route

To verify that the API route is working, open a browser and navigate to:

yourdomain.com/wp-json/wp/v2/your_custom_post_type        

Replace your_custom_post_type with the name of your custom post type. If everything is set up correctly, you’ll see a JSON response with the custom post data, including any ACF fields you enabled for REST API access.

Step 3: Fetching the Data in a React Application

Now, let’s fetch this data on the frontend. In this example, I’ll show how to retrieve the data in a React app.

1. Use the following code in your React component to make a request to the WordPress REST API:

import React, {useState, useEffect, createContext} from 'react'
import  './DisplayPost.css'
import PostItem from './PostItem/PostItem'

const DisplayPost = () => {

  const [post, setPost] = useState([]);

  useEffect(() => {
    //getting the data from API url from backend [ wordpress ]
    fetch("https://localhost:5000/wordpress/wp-json/wp/v2/front-end")
      .then((response) => response.json())
      .then((data) => {
        setPost(data);
        console.log(data) //to console the data

    })
      .catch((error) => {
          console.log("Post error: ", error);
        });
    }, []); // Dependency array should be here, outside the .catch()
     
     //Extract the post data Using the map() function
      post.map((item,index)=>{

        const title = item.title.rendered;
        const techName = item.acf.technology_name;
        const message = item.acf.message;
        const id = index;
        return [title, techName, message, id]

      })


  return(
    <div>
             <PostItem />
    </div>
  )
}

export default DisplayPost;        

1. Replace [ front-end ] with the appropriate names for your custom post type in APIurl

After running this code, you should see the data from the WordPress REST API displayed in your React application!

This is a simple way to integrate ACF fields into a headless WordPress setup. With these steps, you can now leverage ACF data in any frontend framework via the REST API.

Learning something NEW follow me, for more...Code together & grow together.....