Pagination in Casper theme

While this is an old thread, I encountered something similar recently - so sharing here in case it can help others.

First, be sure you are updating the correct package.json file. Not the one at the root of your ghost directory, but rather the one in your theme folder (e.g. /ghost/content/themes/casper/package.json). That file will already have a posts_per_page config setting - probably set to 25. So change that to whatever number you want.

Next, the Casper theme, as noted by @vikaspotluri123, has infinite scrolling built in - which you presumably want to disable since you desire a limited number of posts per page. To do that, go into the /assets/js/infinite-scroll.js file and add return; as the first line of the function. This is obviously a hack to prevent the function from doing anything. A cleaner solution is to not reference that js file at all, but the Casper theme has everything all built-bundled-referenced in one casper.js file. So you either need to rename the infinite-scroll js or use the return hack.

Lastly, place the {{pagination}} helper in the appropriate hbs files (e.g. tag.hbs). Now you’ll see “Page x of y” at the bottom of each page with appropriate newer / older links which you can style accordingly.

5 Likes