Add the Advanced Custom Fields (ACF) Plugin and Expose those Fields to the REST API
In this lesson, we will install the Advanced Custom Fields (ACF) plugin and discuss some of the advantages of using this. ACF gives us increased options of what we can do with our different types. For this example, we'll extend the Chair field to include fields for price, material, and weight.
These fields are not automatically exposed to the API. We will need to install the ACF to REST API plugin which will add an acf field to our REST API object for you to access this data on the front end. This keeps the data pure so that you can receive them as props instead of being forced to extract the data from the rendered content.
Instructor: [0:00] So far, we've built all of our posts using the Gutenberg editor. We're going to use plugin those used by a lot of WordPress developers to add some more functional fields or plugins library with an add new. We're looking for advanced custom fields or ACF. We're going to install it and activate it. We're going to activate it.
[0:19] We can see now we have this new menu item custom fields. Earlier, I created a chair's custom post type. What I'm going to do is I'm going to add a new field group for when we have a chair. When we have a chair, I want to know the price of that chair, which is going to be a number.
[0:36] I also want to know what material the chair is made from. I'm going to give a radio button for that. Maybe, it's wooden, metal, or plastic. I also am curious about the weight of that chair and I'll put an instruction that because I'm European, say the weight should be in kilograms.
[0:58] You can see, I can require the field a minimum value. I don't want any weights that are negative, so let's put that in as zero. Let's name that chair fields and save that. Now, when I go into my chairs and add new chair, as well as a block editor here, I also have this other section that I can fill in.
[1:15] My price is going to be maybe 70. It's made of plastic and metal, I guess. It weighs...I don't know, about 10 kilograms. Again, this is my favorite office chair. It's an image of it, I think this is it. Let's put a list in, it's comfy. It goes up and down. I'm going to publish that on publish.
[1:35] Let's have a look at our back end. We care about chairs. This is my favorite office chair. I have my blocks. We just have to image block and then we should have our list block there, just go. We don't see anything from the ACFs, so what we need to do is add another plugin specifically ACF to REST API. I'll install that and activate that plugin.
[1:59] If I go back to my endpoint and query it again, so as I have my content and my blocks, I also have this new block called ACF. There's ACF fields, and I could see my price is 70. My weight is 10. My material is plastic.
[2:13] This keeps the data pure, so I can just receive for these props rather than having to extract it from the rendered HTML. I don't have to try to work out which bit was plastic, or which bit was the price. I can have it in the field and then process it how I want, when I get it to my front end.