WordPress supports pagination in standard archives by default, allowing you to split listings into pages and navigate with pagination controls. WordPress Archives not only allow you to customize these archives fully, but also give you full control of how the pagination works and looks. It offers advanced features such as AJAX pagination with transition effects, infinite scrolling, browser-history management, and caching options.

This tutorial explains how pagination works for WordPress Archives. If you are interested in splitting custom lists of content into pages, you can learn more on the Views Pagination documentation page.

Enabling Pagination

When you create a new WordPress Archive in Toolset, pagination with page reload is enabled by default. The number of items per page is set automatically, based on the respective option found on the Settings->Reading page.

Default pagination settings for a newly created WordPress Archive
Default pagination settings for a newly created WordPress Archive

You can always turn pagination off by selecting No pagination in this same dialog.

Pagination Options

Besides pagination with page reload, WordPress Archives offer AJAX pagination. This features transition effects and advanced options.

AJAX pagination options
AJAX pagination options

Among the various transition effects, you can enable Infinite Scrolling. This feature enables navigation without pagination controls. The items of the next page are loaded automatically when the visitor scrolls to the bottom of the current archive.

Shortcodes from 3rd party plugins (for example, Visual Composer) will not work properly when any type of AJAX call is used inside Content Templates, Views, and WordPress Archives. This includes AJAX pagination and custom search.

Browser History Management in AJAX Pagination

By default, the Views plugin creates browser-history entries for WordPress Archives. This allows you to navigate pages using the browser’s back and forward buttons.

This feature can be switched off from the History management section of the pagination advanced options. There is also an option to disable it globally on the Frontend Content tab of the Toolset Settings page.

History management option for a specific archive Global history management option
History management option for a specific archive Global history management option

If you disable this option, the browser’s URL will remain unchanged as you navigate the archive pages.

Inserting Pagination Controls

After setting the pagination options, you need to insert controls so that your visitors can navigate the pages of your archive. You can check and insert any of these controls inside the Loop Output Editor by clicking on Pagination controls.

WordPress Archive pagination controls
WordPress Archive pagination controls

If you are using Infinite Scrolling, you cannot add pagination controls, because the pages are being loaded automatically.

Let us consider an example similar to the following image:

Pagination example when you navigate to page 20
Pagination example when you navigate to page 20

The corresponding pagination-control options for this example are:

Pagination control options
Pagination control options

Selecting the output style for pagination controls

In the dialog for inserting pagination, you can select how the controls are output.

Selecting the pagination output style
Selecting the pagination output style

Nice output out-of-the-box

The Fully styled output option is used by default. This means that pagination controls are output using Bootstrap-compatible output which makes them look great out-of-the-box without any custom styling. You can, of course, add your own styling if you need.

This output style works by wrapping certain types of pagination controls with Bootstrap HTML elements. To other types of controls, it simply adds the output=”bootstrap” argument.

Filter Editor with inserted pagination controls using Bootstrap styling
Filter Editor with inserted pagination controls using Bootstrap styling

Please note that the Bootstrap CSS stylesheet needs to be loaded on your site for the Bootstrap-compatible output to work. Don’t worry if your theme is not using Bootstrap, Toolset can load it for you. To enable this, go to the Toolset -> Settings page and scroll to the Bootstrap Layouts section. There, select the Toolset should load Bootstrap 3.0 option.

Letting Toolset to load Bootstrap stylesheet for your site
Letting Toolset to load Bootstrap stylesheet for your site

Raw output for custom styling

If you do not want to use Bootstrap CSS for your pagination output, simply select the Raw output option in the pagination insertion dialog. Then, apply your own HTML and CSS styling for the pagination output.

Pagination Controls Shortcodes

Views will insert the shortcodes for the pagination controls that you select. This table summarizes what each of these shortcodes does. You can use this to further customize the pagination by adding your own HTML around the pagination shortcodes and changing the order.

Shortcode What it does Screenshot
 [wpv-pager-archive-current-page] Displays the current page number  pagination-controls-current-page
 [wpv-pager-archive-total-pages] Displays the total number of pages  pagination-controls-total-pages
 [wpv-pager-archive-prev-page]Previous[/wpv-pager-archive-prev-page] Displays a Previous link to move to the previous page. You can edit the text between the shortcodes for your own “previous” text.  pagination-controls-prev
 [wpv-pager-archive-next-page]Next[/wpv-pager-archive-next-page] Displays a Next link to move to the next page. You can edit the “next” text.  pagination-controls-next
 [wpv-pager-archive-nav-links] Displays a list of pages, enabling visitors to click on a page. This shortcode may have certain parameters, depending on the options that you have set.  pagination-controls-links