DEV Community

loading...
Cover image for WP Snippet #012 Add custom (ACF) fields to the WP Rest Api.

WP Snippet #012 Add custom (ACF) fields to the WP Rest Api.

Stephan Nijman
Hi I'm Stephan Nijman! WordPress, Php, Javascript, React and Css Developer/Enthusiast/Blogger/Youtuber.
Originally published at since1979.dev 惻3 min read

Originally posted on my website on April 29th 2020

How to add extra fields to the WordPress Rest Api

While working on a different article about using the WordPress 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 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.

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 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

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 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

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. An easier way is to add it as a custom field like shown below.

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.

Inside our new get_featured_image_api_field callback function we now use the 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.

Follow

Found this post helpful? Follow me on twitter @Vanaf1979 or here on Dev.to @Vanaf1979 to be notified about new articles, and other WordPress development related resources.

Thanks for reading and stay safe

Discussion (6)

Collapse
ade profile image
Andrej

Thanks mate, just what I was looking for

Collapse
vanaf1979 profile image
Stephan Nijman Author

Your welcome Andrej. Iā€™m glad this post was usefull to you! šŸ˜Š

Collapse
tylerlwsmith profile image
Tyler Smith

I love the REST API. I wish it were as easy to extend the actual post object as the REST response.

Collapse
vanaf1979 profile image
Stephan Nijman Author

True. Did you know you can at least get post meta fields directly from the WP_Post objects? dev.to/vanaf1979/wordpress-access-...

Collapse
tylerlwsmith profile image
Tyler Smith

I do, actually! It's not my favorite though: if you use ACF, it's usually doing some magic and formatting under the hood. I also use long prefixes.

I did one site where I where I managed to pull Blade templates out of Laravel, put an object wrapper around the WP_Query class and have it return custom extendable objects that wrapped the WP_Post class. It felt a little like Laravel.

It ended up being a nice experience, but I only used it once because I stopped doing much WordPress development around that time. I should really make that a starter theme and open source it...

Thread Thread
vanaf1979 profile image
Stephan Nijman Author

That sounds nice. I would love to have a look at that! :)