Loading more posts with a button click and WP REST API

As I worked on Quotidiano, the WordPress theme I built with the WP REST API and AngularJS, I found a lot of helpful tutorials to figure out how to do things; however, there was one feature I wanted in my theme that I couldn’t figure out how to work — loading more posts with a click of a button.

There are a number of different tutorials out there that show how to do the infinite scroll without a button, but nothing on how to do it with a button.

In the end, I finally got the feature to work after looking over numerous tutorials on directives. So for anyone out there who might be struggling with what I did, here’s a nice, neat tutorial to help you out.

Starting out

So I’m going to make a few assumptions here. First, I assume you’re familiar with the WP REST API and AngularJS. If you’re going to try something of this level, you have to have some idea of what you’re doing. I’m also assuming you have your project up and running. If not, there are a number tutorials out there to get started.

Now to start the process of adding the load more feature, make sure you have the following code in the HTML partial you want the feature in. I’m using Foundation as my framework, so don’t worry so much about the classes.

https://gist.github.com/ViewFromTheBox/a345c0309dc8c19fc9215f3eade7e496

The most important attribute in this section is ng-repeat="post in posts" since that’s how we’re getting our data onto the page. Also, make sure you include the archive-load-more element. You can name it whatever you wish, but make sure you make a note of it.

Now, create another partial and paste the following code. Don’t worry about what to name this file.

https://gist.github.com/ViewFromTheBox/c5879b013c6dd01424451aad83229ead

Like the code before this, don’t worry so much about the classes, but do pay attention to the ng-repeat="post in new_archive_posts" attribute. We’ll get to that later.

Adding the Javascript

Alright, I’m going to make another assumption that you’ve already figured out how to load posts to the page, so I’m going to skip that part. If you haven’t done that, there are many tutorials on how to do that.

Basically all that’s left is to add in the directive to add the functionality to this. So, add the following to your JavaScript code where you’re AngularJS app resides.

https://gist.github.com/ViewFromTheBox/79c9a20378bda67a6c40340b8f2e1e96

There’s a lot here to digest, so lets go through this piece by piece.

First off, make sure that your directive name is the same as that element in the HTML without the dashes. Second, make sure the templateURL is set to the partial you’ve just created. Next we have two scopes to deal with. The first is the paged variable so that we can go through all of the posts.

The second is our function that will take that variable, use it in the url to get the next set of posts and output it to the page.

Now, before we get to loading the new posts, we have to take away the ng-repeat attribute from all of the posts currently on the page. If this doesn’t happen, then there will be mass chaos when the new set of posts are loaded. So through jQuery, we’ll go through all of the posts on the page and remove that attribute.

Next we’ll get our next set of posts, which is the same as what you normally would do when you load the page. The only difference is that we’ll add the ?paged=" + $scope.paged part to the end of the url.

Then comes the fun part. We load the posts through our newly created partial and then append it to the bottom of the posts that have already been loaded and then we move our custom element to the bottom of that so that the posts continue to be loaded at the bottom. And then finally, we go through each of the new posts and remove the ng-repeat attribute from them.

And that’s it. Loading posts via a button click can seem complicated at first, but once you see it typed out in code, it becomes a whole lot easier.

Other AngularJS and WP REST API Tutorials

• Displaying threaded comments with WordPress REST API