I've setup a 'posts' section with a collection of posts. I'm trying to add pagination to the individual post entry.

I've copied the pagination code from the Craft CMS documentation but I'm having issues with the slug.

The problem is my slugs are like: posts/post-1, posts/post-2, posts/post-3 etc.

And when you click on the 'previous' or 'next' post the slug is like 'post-3/p3' which the 'p3' on the end.

How do I convert that to my normal post slug of just 'post-3'.


Here is my code:

{% set query = craft.entries()
        .limit(1) %}

{% paginate query as pageInfo, pageEntries %}

<div class="pagination">
    <a class="pagination__group" href="#">
        {% if pageInfo.prevUrl %}
            <a href="{{ pageInfo.prevUrl }}">Previous Page</a>
        {% endif %}
    <a class="pagination__group" href="#">
        {% if pageInfo.nextUrl %}
            <a href="{{ pageInfo.nextUrl }}">Next Page</a>
        {% endif %}

1 Answer 1


Pagination is for breaking up a list of entries into different pages. p3 means page 3 of entries.

What you're looking for is the ability to link to the next/previous entry. If you are ordering your entries like a blog, by post date, newest first you can create the links like this. On your single entry template:

{% set nextEntry = craft.entries.section('posts')
    .postDate('>= ' ~ entry.postDate.timestamp)
    .order('postDate asc')
    .id('not ' ~ entry.id)
    .one() %}

{% if nextEntry %}
    <a href="{{ nextEntry.url }}">Next Post</a>
{% endif %}

{% set previousEntry = craft.entries.section('news')
     .postDate('<= ' ~ entry.postDate.timestamp)
     .order('postDate desc')
     .id('not ' ~ entry.id)
     .one() %}

{% if previousEntry %}
    <a href="{{ previousEntry.url }}">Previous Post</a>
{% endif %}

entry is the current entry you're viewing. If you're ordering the entries in a different way you can adjust the queries. This answer goes into more detail, including how to change this if you're ordering by title.

If you have your entries in a structure section you can do this:

{% if entry.getNextSibling() %}
    <a href="{{ entry.getNextSibling().url }}">Previous Post</a>
{% endif %}

{% if entry.getPrevSibling() %}
    <a href="{{ entry.getPrevSibling().url }}">Previous Post</a>
{% endif %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.