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.
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.
You can always turn pagination off by selecting No pagination in this same dialog.
Besides pagination with page reload, WordPress Archives offer AJAX pagination. This features transition effects and advanced 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.
Limitations of using AJAX pagination
There are two important limitations that you should be aware of when using any type of AJAX calls inside Views, Content Templates, and WordPress Archives:
- CRED forms will not work when AJAX is used.
- Shortcodes from 3rd party plugins (for example, Visual Composer) will not work properly. This limitation includes AJAX calls for both pagination and custom search.
The alternative for both cases is very simple. If you want to use CRED forms and shortcodes from 3rd party plugins inside your Views, please use “full page reload” pagination instead of the AJAX one.
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|
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.
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:
The corresponding pagination-control options for this example are:
Selecting the output style for pagination controls
In the dialog for inserting pagination, you can select how the controls are output.
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.
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.
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|
|[wpv-pager-archive-total-pages]||Displays the total number of 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.|
|[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.|
|[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.|