Join Morten Rand-Hendriksen for an in-depth discussion in this video Add and display embedded data, part of WordPress: REST API.
- [Instructor] Looking at the output from our new Ajax functionality in the theme, it looks okay until you take a closer look. So if we load a post here, you'll see this looks fine, but there's two things that are missing. First of all, there's no featured image. Maybe there is no featured image for this particular post, but if there was one, it wouldn't appear. And the second thing is, at the top it says Friday, October 7, 2016 by author name. There's a good reason for this. If we go back to Postman for a second and look at the output for a single post, you may remember that in a single post output, we have the ID for an author, but we don't have the actual author name.
Likewise we have the ID for featured_media, so the featured image, but we don't have the featured image itself. You'll probably also remember that we can get that info into our post if we use the embedded feature. You'll remember both author and featured_media are embeddable. So if we append ?_embed=true to our request to the API, then at the bottom here, we get author, and here we have the author name, then we get featured_media and here we have all the information about the featured image.
So how do we get this information into our Ajax functionality and gain access to the pieces we want? Let me show you. First, we go to the get_previous_post function. You'll remember this is where we created the json_url that is being passed to the rest API. Here we need to alter the json_url, so at the end here after the ID, you say plus, and then we add on ?_embed=true. This will give us the post object with all the embeddable data.
Then we need to figure out how to get to this embedded data because you can see it sits in its own object in underneath the other objects. So the structure here is we start with _embedded, then we get the data object, in this case the author, and this author object is its own array, so here we have to get the first item from the author object and then output the name. That's all done down in previous post content. Here I already have a placeholder for the Author Name right here.
Now I need to grab the object, so that's just like before. Then inside the object, I want _embedded. Then I want the author inside the embedded content, and I want only the first item in the author, so that would be item number zero. Then within that author, I want the name field. Save that, back in the browser, reload the page, click the link, and now it says Friday, October 7, 2016 by Morten Rand-Hendriksen.
That means everything is working and I'm able to access not only the post object itself, but also the embedded post objects that come inside the post object, so that would be the author, featured image, categories, tags and other taxonomies, comments, and so on.
- Using a REST client to communicate with a REST API
- Reviewing available routes, endpoints, and arguments
- Adding custom post types and taxonomies
- Altering the API response
- Using PHP for resiliency
- Passing info using wp_localize_script()
- Setting up a REST API request through AJAX
- Outputting selected post data to the front end
- Formatting post data to match a theme
- Triggering AJAX for an infinite scroll effect
- Using AJAX to load subsequent responses