Add Numbered Pagination to Ghost

Link to Example Code on Github

If you want your pagination to look like "1 2 3 4 5" instead of the normal "Previous Post/Next Post", you can do that, but it does take a little theme tweaking and some javascript.

This is just our way of how we would solve it. There are other ways I am sure, and the usefulness of this may depend on how your theme operates. Use this as an example to edit your theme to get it to work the way you would like.

I am basing these steps off the default Capser theme. Code may be in different places for you, but the concept should be the same.

  1. In you theme, check to see where {{pagination}} is called. It will most likely be in your index.hbs or in a partials file. For Casper, it is in the loop.hbs partial.

  2. In Casper, {{pagination}} is called twice, once at the top of loop.hbs and once at the bottom. We are going to remove the top one completely.

  3. Create a partials.hbs file if your theme doesn't have one already.

  4. Insert the following into your partials.hbs:

  5. Restart Ghost

  6. You should now see that all the numbers are showing up in where your pagination used to be.

What we have is extremely basic. Beyond this you can add styling, or spacing or whatever else. Let us know in the comments below if you have any questions or need any help!