Search code examples
phppaginationcontent-management-systemexpressionengineexpressionengine3

Expression Engine 3 pagination with page_uri

I have looked for a while for a solution to this, but have been unsuccessful so far. Not sure if it's me, or if there's a problem with the pagination functionality.

What I'm trying to do

When on a page within a certain channel, I want to have 'prev' and 'next' buttons to click through to the next article in the channel. These links must use the page_uri set for each page.

What I've tried

I have a channel full of pages. In the template, I have added:

{exp:channel:entries channel="project" dynamic="no" orderby="date" sort="desc" limit="1" paginate="bottom"}
    <div class="container-fluid project-section pagination-bar">
        <div class="container">
            <div class="col-md-12">
              {paginate}
              {pagination_links}
              <ul>
                {previous_page}
                <li><a href="{pagination_url}" class="page-previous">Previous Page</a></li>
                {/previous_page}

                {next_page}
                <li><a href="{pagination_url}" class="page-next">Next Page</a></li>
                {/next_page}
              </ul>
              {/pagination_links}
              {/paginate}
            </div>
        </div>
    </div>
    {/exp:channel:entries}

This is adding the links to the bottom of the page, but when clicking on them the URLs are just loading the same URL you're currently on, then adding /P1 to the end.

I need it to use the page_uri added in the CMS so that it clicks through properly and doesn't affect SEO on the site.

Any help appreciated on this one, thanks

Solution

  • Pagination isn't really the way around this. You should look into Next/Previous Entry Linking. It'll give you a full link to the previous and next entry. Just make sure to keep it outside your channel entries loop.

    For example you'd want something like:

    {exp:channel:prev_entry channel="project"}
  <a href="{path='projects'}">View previous project</a>
{/exp:channel:prev_entry}

{exp:channel:next_entry channel="project"}
  <a href="{path='projects'}">View next project</a>
{/exp:channel:next_entry}

    Assuming your projects all live in a section called projects you'd be linking between

    /projects/example-project-1
    /projects/example-project-2
    /projects/example-project-3