Add Pagination when using Ghost's Public API


Note: The API is currently in beta. Some things in the post may change as Ghost solidifies how the API will function.

When using Ghost's public API, you do not have access to some helpers like pagination. This leaves you stuck with only getting a few posts, or getting all of them. We already have how to load posts dynamically which is kind of an infinite scroll, but what if you want actual pagination? This is how we would approach this problem:

Note: We are going to be modeling all the HTML after the default Casper theme, so, that may change for you, but the concept of how this works should stay the same

  1. Make sure the public API is enabled
  2. So, the way this is going to work, is if you are at your blogs default url (ex ghostforbeginners.com), the theme will load the first 2 posts (you can change this in the code we show). If you want to go to the next page, it will route you to a url that looks like ghostforbeginners.com?page=2. This will let the theme know to load the 2nd set of posts and so on for all the pages. When it reaches the end, there will be no next post button.
  3. I am going to give you the full code here, and then I will walk you through each part of it. So, here is the complete code we are going to use:
    index.hbs

    default.hbs

    assets/js/ajaxLoad.js

  4. So, since I am using the casper theme, the first thing I did was remove the loop.hbs partials file since we won't be needing it. Then, I added the next and previous buttons to the index.hbs file.:

  5. Next, create a file called ajaxLoad.js (or whatever you want) and place it in the assets/js/ folder.
  6. Include this file in your default.hbs file:

  7. Now, we need to build out the ajaxLoad.js file with everything it needs. This file is going to need to, grab the client id and client secret, figure out what page the visitor is on, make an AJAX call to get the posts for the correct page, load all post info, append the post info to the content div, and finally enable or disable the next/previous post buttons.
  8. This script file is commented as much as I could, but I will walk you though it also. First, we need to build the variables. We start by grabbing the base url for later use. Then, we check to see if there is any url attributes (?page=whatever) and create the nextPage value from that. The variable you will most likely change is the pagination variable. This is how many posts will load from the AJAX call.

  9. Now that we have the variables, we can start making our first AJAX call. The url is going to include the number of posts to get and which page of posts to get (for more information on building the api url, check out the offical docs). Once we have gotten back the data, we set the links for the next and previous buttons based on the meta data that comes back.

  10. After we have set the buttons, we loop through each post and make one more AJAX call to get all the author info. Once inside the author info, we make a call to a function (sending through both the post and author data) that will build out the posts themselves. We will look at this function in the next step.

  11. This function builds a large HTML variable to append the data to the content div. This you will most likely change to fit the HTML that your site uses. You can see how we append the HTML as text, and intersperse it with the post specific variables. We also do checks to see if things like author images exist before appending the url.

  12. Restart Ghost and you should see it all working!

    At the top of this post, there is not only the full code that we used, but also a link to this theme on GitHub. Feel free to check out and download that theme if you want to compare to what you are doing with your theme or to verify anything your working on.

Please let us know if you have any questions in the comments below. This is not exactly a beginner theme change and has a lot of variables. We are happy to help out to get it all working for you.

`default.hbs` `assets/js/ajaxLoad.js` 4. So, since I am using the casper theme, the first thing I did was remove the `loop.hbs` partials file since we won't be needing it. Then, I added the next and previous buttons to the `index.hbs` file.: 5. Next, create a file called `ajaxLoad.js` (or whatever you want) and place it in the `assets/js/` folder. 6. Include this file in your `default.hbs` file: 7. Now, we need to build out the `ajaxLoad.js` file with everything it needs. This file is going to need to, grab the client id and client secret, figure out what page the visitor is on, make an AJAX call to get the posts for the correct page, load all post info, append the post info to the content div, and finally enable or disable the next/previous post buttons. 8. This script file is commented as much as I could, but I will walk you though it also. First, we need to build the variables. We start by grabbing the base url for later use. Then, we check to see if there is any url attributes (`?page=whatever`) and create the `nextPage` value from that. The variable you will **most likely** change is the `pagination` variable. This is how many posts will load from the AJAX call. 9. Now that we have the variables, we can start making our first AJAX call. The url is going to include the number of posts to get and which page of posts to get (*for more information on building the api url, check out the [offical docs](http://themes.ghost.org/docs/ghost-url-api#section-description)*). Once we have gotten back the data, we set the links for the next and previous buttons based on the meta data that comes back. 10. After we have set the buttons, we loop through each post and make one more AJAX call to get all the author info. Once inside the author info, we make a call to a function (sending through both the post and author data) that will build out the posts themselves. We will look at this function in the next step. 11. This function builds a large HTML variable to append the data to the content div. This you will most likely change to fit the HTML that your site uses. You can see how we append the HTML as text, and intersperse it with the post specific variables. We also do checks to see if things like author images exist before appending the url. 12. Restart Ghost and you should see it all working! > At the top of this post, there is not only the full code that we used, but also a link to this theme on GitHub. Feel free to check out and download that theme if you want to compare to what you are doing with your theme or to verify anything your working on. Please let us know if you have any questions in the comments below. This is not exactly a beginner theme change and has a lot of variables. We are happy to help out to get it all working for you.