WP Snippet #012 Add custom (ACF) fields to the WP Rest Api.
Tags: wordpress, webdev, php
Published: 2020-04-29 18:31:00

---
title: WP Snippet #012 Add custom (ACF) fields to the WP Rest Api.
published: true
description: In this code snippet we will have a look at the WordPress Rest Api and how we can add our own custom fields to any of the endpoints.
canonical_url: https://since1979.dev/add-custom-acf-fields-to-the-wp-rest-api/
cover_image: https://since1979.dev/wp-content/uploads/2020/04/wp-snipper-012-add-custom-acf-fields-to-the-wp-rest-api.jpg
tags: wordpress, webdev, php
---
[Originally posted on my website on April 29th 2020](https://since1979.dev/add-custom-acf-fields-to-the-wp-rest-api/)

### How to add extra fields to the WordPress Rest Api

While working on a different article about using the [WordPress Rest Api](https://developer.wordpress.org/rest-api/) to show post on another WordPress site I ran into the problem that the default Rest Api endpoints didn't include al the data that I needed.

Lucky for me/us the Rest Api is very extendable. Meaning we can add all the additional fields to the endpoints we need. And in this article I'm gonna show you how we can do so.

### Adding a Acf field to the WordPress Rest Api

As a first example I want to show you how we can add an Acf field to the /post endpoint. You could use [a plugin](https://nl.wordpress.org/plugins/acf-to-rest-api/) for this, but I personally dislike using generic plugins for things that can be solved with a couple of lines of code.

In de below example we will add a "related posts" Acf field to the /posts endpoint.

{% gist https://gist.github.com/vanaf1979/bbcf358ff699444830261ec7b2feb89c %}

The first step is to register the field with the Rest Api. For this task we create a new function called *register_related_posts_api_field*. Within this function we use the *[register_rest_field](https://developer.wordpress.org/reference/functions/register_rest_field/)* function to register the field. The *register_rest_field* function accepts the following parameters:

-   **$object_type:** The type of WordPress objects the field must be registered for. In our case we want to add a field to the */posts* endpoint so we pass *post* as the object type. (You could also pass an array of objects)
-   **$attribute:** A string representing the name we want our Json key to have. In this example we want to add a "related posts" field so we pass *related-posts*.
-   **$args['get_callback**'**]:** A callback function that will be responsible for retrieving the data for this field.
-   **$args['**update_callback****'**]:** A callback function that will be responsible for updating the data of this field. We don't need it in this example.
-   **$args['****schema******'**]:** The callback function used to create the schema for this field. In this example we don't need any so we pass *null*.

With this code we registerd our field we now need to create the *get_related_posts_api_field* function that will retrieve the data from the Acf field..

#### Creating the callback function

{% gist https://gist.github.com/vanaf1979/74d518e60367a3690a4231e5fb5cf3b5 %}

Above we create the *get_related_posts_api_field* function that accepts one argument called *$post*. Inside this function we use the Acf function *[get_field](https://www.advancedcustomfields.com/resources/get_field/)* to get the value by passing *related_posts* as the Acf field name and we get the id from the $post parameter to pass as the second parameter.

If we did everything correctly we could now test things out by pointing our browser to yourdomain.com/wp-json/wp/v2/posts/ and get a result like shown in the image below

![](https://since1979.dev/wp-content/uploads/2020/04/wp-restr-api-related-posts.jpg)

### Add featured image to the WordPress Rest Api.

Another use case is to add the featured image to the Rest Api. You could get the featured image from the Rest Api by default but this is a [pretty cumbersome process](https://medium.com/@dalenguyen/how-to-get-featured-image-from-wordpress-rest-api-5e023b9896c6). An easier way is to add it as a custom field like shown below.

{% gist https://gist.github.com/vanaf1979/5cdf446be1fdd07ac9d60e1186dc66bd %}

The code above is almost identical as the previous example. We changed the function name to *register_featured_image_api_field*, the fieldname to *featured-image* and the callback function name to *get_featured_image_api_field*. Lastly we updated the callback function name inside the *add_action* function.

#### Callback function

Now we need to create the *get_featured_image_api_field* callback function.

{% gist https://gist.github.com/vanaf1979/dd274f00151c6d51bf5103928765f5b4 %}

Inside our new *get_featured_image_api_field* callback function we now use the *[get_the_post_thumbnail_url](https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/)* function and pass it the post id and any valid registered thumbnail size to get the full Url to the post's featured image.

Testing our yourdomain.com/wp-json/wp/v2/posts/ endoint again we should now have a featured-image key/value pair like shown in the image below.

![](https://since1979.dev/wp-content/uploads/2020/04/wp-restr-api-featured-image.jpg)

#### Follow

Found this post helpful? Follow me on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

**Thanks for reading and stay safe**