Join Morten Rand-Hendriksen for an in-depth discussion in this video Format post data to match the theme, part of WordPress: REST API.
- [Tutor] Before we continue, let me just briefly show you what a fully built out version of this AJAX function would look like. In the exercise files for this movie, 0407, you'll find a more built out version of the code we worked with in the previous movie. The only change here is that I've expanded this previous post content section with more HTML. So let me explain how I built this. First, I went to a single post and looked at the HTML markup for that post by just dumping out the HTML from the browser.
Then I duplicated that HTML structure inside the previous post content variable and populated relevant sections with content from the data object return through AJAX from the REST API. Now, this took a little bit of jigging. I had to play around with the SINGLE.PHP template and figure out how that worked and then figure out where the different elements separated and what classes from the parent theme were kicking in at what points and what I ended up with was a structure that actually works the way it's supposed to. So, if I go to my browser right now, load the first post, so here you see the first post, and then click this link down here, it automatically loads the next post and when I scroll down to the bottom, we get a link to the previous post, click on that one, it automatically loads the previous post, scroll to the bottom, click again, loads the previous post, scroll to the bottom, click again, loads the previous post and so on and so on and so on.
Now, I'm sure you're going to ask this question so I might as well answer it. Why is it that the first post is aligned to the left hand side and the rest of them are center aligned? Well, there's a really simple reason for that. You may remember that when I was messing around with SINGLE.PHP earlier, I removed the call to get sidebar. Well, this theme, 2017, changes the layout depending on whether the sidebar is currently populated or not, and, if I go to the customizer and go to widgets, you'll see here under sidebar I actually have some widgets.
So even though they're not being displayed, the theme thinks they're being displayed and allots space on the right hand side for them. So they center align everything. All I have to do is just remove these, save and publish and now the content is center aligned for the first post and for the next post and for the next post and so on. So here you're also seeing that thing I mentioned previously about re-initializing the tracking of this link. In the code for the build post function, at the very bottom I've added a call back to previous post trigger.
So that means we have a new link, then we re-initialize previous post trigger and the functionality will kick back in and work on the new previous posts. So before we continue, I recommend you go to the exercise files for this movie and look at this code, see how it works in your browser and see how it all fits together, then, when we move on to the next movie, I'll show you how to add additional features into this content by expanding the output from the REST API from just the post to the post with embedded content.
- 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