Join Morten Rand-Hendriksen for an in-depth discussion in this video Output selected post data to the front end, part of WordPress: REST API.
- [Instructor] At this point, Ajax and the REST API have given us the data object for the previous post. But it's currently just sitting in the browser store and we can display it in the browser console. That doesn't really do us any good. What we need to do now is grab the pieces we want from that data object and display it as HTML in the browser. And we're going to do that inside our Ajax function, but to just simplify the code, I'll split it out into it's own separate function. So below the Ajax function here, we'll create a new function, call it Build Post.
And that function will receive the object Ajax got for us. Build Post will be called anytime Ajax works properly, so I'll place it up here inside Ajax done. Then, inside Build Post, I'll need to create some content and then inject it into the page. So I'll create the content first. I'll set up a new variable, call it Previous Post Content. Inside this variable we'll just put in div for now, with a class generated.
Then inside that div, we'll set up an h one and inside that h one, we'll put the post title. And this is where Postman comes in really handy. The object that was returned from the REST API is exactly the same thing you see in Postman. So if we look at a single post in Postman, you'll see if we want the title, we need to get Title Rendered. That means I'll say, object, that is the object that got returned. Title Rendered, and I'll close my h one. Then we should put in the content itself.
Here again, I'll go back to Postman, to see what that's called. Content Rendered. So, object Content Rendered plus close the div and finally, I'll just close div class generated. Now I need to place this content somewhere in the page. And if I go to single dot php for a second and look at the single structure here, you'll see, we injected this whole nav class, navigation, post navigation, load previous thing here, and I should be able to just replace that entire thing with my new div.
So I'll target post navigation and replace post navigation with this. To do that, I'll say dollar sign, post navigation, that's the original container. Replace with, and here we'll call in previous post content. Save, go back to the browser. I'll close the console log here. Reload the page, and now when I click on this link, all this content down here, should be replaced by the new content from the previous post.
Aha, it totally worked. So here you see we have the title and then the post content. Now of course, this looks completely ridiculous right now because none of this content is styled porpertly to match with the rest of the content on the page. And that's because the HTML structure of the new content doesn't match the HTML structure of a regular post. That can easily be fixed by just putting in more content and more containers and all that stuff. But the important part is, the functionality actually works the way it was intended. That means, anytime I go to a post, I can now load the previous post below it by clicking the button.
- 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