Add or Customize Pagination

Pagination is key for a blog. Luckily adding pagination can be as simple as adding a single line to your theme:


Adding that helper will use the default pagination HTML markup which is defined in Ghost core at core/server/helpers/tpl/pagination.hbs. Pagination can be used on the home page and tag pages. Pagination cannot be used on posts or static pages because there is not a group of elements, just that one post.

A normal use case would be adding the {{pagination}} to your index.hbs file and then styling it how you wish in your css. If you wanted to define your own pagination rather than using the default. This is entirely possible by creating a pagination.hbs partial file.

Ghost checks to see if this partial exists, and if not, it uses the default. To start your customization, create the partials/pagination.hbs file and paste the default code found at the location above into the file and start customizing how you wish.

Here is what that code currently looks like:

<nav class="pagination" role="navigation">
    {{#if prev}}
        <a class="newer-posts" href="{{page_url prev}}">&larr; Newer Posts</a>
    <span class="page-number">Page {{page}} of {{pages}}</span>
    {{#if next}}
    <a class="older-posts" href="{{page_url next}}">Older Posts &rarr;</a>

From there you can change what the pagination says, change the styling in your CSS, or change it completely. Ghost will use that code wherever you have {{pagination}} inserted.