Pagination in Casper theme

Developer help
1

Hi guys, is there any way to add pagination or just Older posts / Newer posts navigation to Casper theme? I don’t really want the front page to be quite heavy. Many thanks!

1 Like
2

I’ve changed posts_per_page in package.json to 10 & added pagination.hbs from this guide Ghost Handlebars Theme Helpers: pagination

I placed {{ pagination }} in index.hbs. The links are working, but it is showing all the posts instead of just 10. Do you have any ideas for this?

3

Casper uses infinite scroll, so the pagination in the package file should only change the number of additional posts are loaded

4

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
5

I followed your advice and successfully fixed the lack of pagination issue with the newsliner theme (https://1082.xyz). Thank you!

1 Like
6

@1082-xyz I also spoke about this issue with infinite scrolling vs pagination in this topic so I’m glad you brought this to my attention :slight_smile: