Whenever you generate lists of content you may need to limit the number of items displayed at any one time, just like the pagination that is typically found on WordPress blogs.
You can add pagination to lists of content created with Views, or to WordPress Archives that you customise with Views. The principles are the same.
There are two parts to adding pagination to a View or a custom archive.
- Enabling the settings for pagination and specifying how the results should update (via ajax or a page refresh)
- Inserting the pagination controls which visitors use to navigate to other pages of results
When you create a new View choose Display the results with pagination so that pagination settings appear in the Filter section.
If you are editing a View created with a different purpose the pagination settings may not be visible. To expose them use the Screen Options tab and make sure Pagination and Sliders Settings is checked.
Pagination settings are always visible on a custom archive.
The settings allow for manual pagination, which requires user interaction to trigger an update of results via page reload or with ajax. The interaction might be the user clicking a link to the next page of results, or with the Infinite Scroll option the update happens when the user scrolls to the bottom of the page.
Lists of content made with Views (but not custom archives) also have the option to automatically update the results after a given delay, which is how post sliders are created, and which we cover in the next topic.
Here we enable manual pagination with the results updated via ajax which will show 3 posts per page and will use a 500ms fade transition when updating.
Manual transitions other than Infinite Scroll need pagination controls to trigger the update.
On the front end the controls typically look something like this:
The available options let you display pagination controls in a variety of formats (discussed in more detail in the pagination documentation, linked to at the end of this guide).
To display controls as in the previous screenshot, you would choose the options like so:
You may need to add CSS styling so that the controls match the look of your theme. If your theme uses Bootstrap, or Toolset is set to load Bootstrap styles (in the Toolset -> Settings page), you can output the pagination controls with Bootstrap-compatible markup so that they are styled accordingly.
In our training site we’ll add pagination to the Events search page. We only have a few sample posts in our demo, so for this example we will show just 3 events per page, and add controls to move between the pages of results.
The Events search page already contains a View cell which adds the filter controls and displays the results, and it is this we will edit to add pagination controls.
The View cell is part of the Content Layout for the Search events page. We can edit that page with the Layouts Editor to access the View cell, or we can edit the underlying View directly, so let’s do that.
- Go to the page Toolset -> Views and select the Search Events View from the list
- The pagination settings are not visible because this View was created as a search View, and so we need to expose them
- Click on the Screen Options tab at the top of the page and in the Filter Section check the option for Pagination and Slider Settings (as shown in the first screenshot above)
- Scroll down to the Filter section and the Pagination and Sliders Settings
- Choose Pagination enabled with manual transition and AJAX, 3 items per page, and a Fade transition effect (as shown in the second screenshot above)
- We then need to insert the shortcodes that generate the pagination controls themselves. We can either add them to the Filter Editor or to the Loop Output Editor, using the Pagination Controls button.
- The Filter Editor already contains the search filters that appear at the top of this page, and we want our pagination controls to appear after the results, so let’s add them towards the end of the Loop Output Editor.
- Insert a blank line after the
<!-- wpv-loop-end -->comment
- Click the Pagination Controls button and choose the type of pagination controls required. Try choosing Navigation controls using links with the options checked for First/Last and Prev/Next page controls (as shown in the second screenshot above)
- Go to the Events search page on the front end to see and test the pagination controls
Go to the Beyond the Basics support page and leave a comment. Nigel, the author of these pages, or one of the other Toolset team members will reply to you.