Join Morten Rand-Hendriksen for an in-depth discussion in this video Set up initial API request, part of WordPress: REST API.
- [Instructor] Now that we have the single post object and all of its data, the only thing left to do is loop through that data, generate the html, and place it in the right hand side of our layout. We do that in a separate function that I've called the post data. You find that function in the exercise files for this movie 05_06. The reason why I've provided you with the function rather than build it out, is because this is identical to what we did in the previous chapter. Here we start by grabbing the featured image ID, if it exists. Then, if we have a featured image ID and it's not zero, then we run through the full script to display the featured image.
This is identical to what we had before. The only difference is the class names are a little bit different. Then we build the post itself and this post is a tiny bit different from what we had in the WordPress theme. That's because we have a much simpler task ahead of us. We're just populating some existing containers. So here you'll see we start out by testing whether we have a featured image, and if we do then we output the featured image. Then we grab each of the existing containers that are in their html file. So here you see in the structure we have post title, post meta, post author, and over here there's post date, and then post link, and finally post content.
Down here we have all of those items. Post title and here we use the text function to replace the existing text with the object title rendered. Then we have post author and do the same thing, text function to replace with object embed author zero name. Then we have post date and here I've converted the date up at the top. Then we just set it to string. Then finally we have post link and post content. Here I use the replace with function to replace the full content because we don't really know what kind of html will be contained within those two elements.
All of this content that's generated, anytime we hit the done stage of our ajax code for a single post. The result of all this is a fully functional app. Now you see, when the post list is generated, we call the first post in. Here we get the featured image, then we have the title, and the content, and if I scroll up and select any of these other ones, the content for those posts are generated. But you notice, there's one weird thing happening here, we have this big gray box. That's because if we inspect it, you'll see this item, post title, still has the skeleton class appended to it.
So, let's get rid of all the skeleton classes so that everything is nice and clean. Scroll down in to build post here and, at the first line, I'm just going to target any element that has the skeleton class, and then use remove class to remove skeleton. Reload the page. Put the URL back in. First post populates. Here we have the featured image, title, description, link to the original source, all the content.
Click on one of the other ones. Everything loads up properly. And now we can test a different site. Let's go take a look at Carrie Dils' site. That means everything is working exactly as I intend. The only thing that's left is to add some tiny UX touches to refine the experience by adding some loaders and adding some highlighting.
- 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