Bagus Sasikirono

Responsive Pagination plugin lets you configure your paginations to adapt to different screen size. Your paginations can be shown differently based on browser width as in responsive web design concept.
For instance, you might want to have a longer pagination with many page numbers when your site visitors are using desktops and large screens, but need shorter pagination with only Prev and Next link when they’re using phones.
You may try using this plugin when you found your theme is not doing well with the responsive design on its pagination. This plugin lets you configure manually to the desired breakpoints.
<h3>Two Different Methods to Apply Responsive Pagination</h3>
You can choose the way you want to apply responsive pagination.
<h4>Method A : Convert Existing Paginations (No Coding Required)</h4>
This method will convert the existing paginations from your theme into responsive paginations without needs to add any WordPress shortcode or PHP code. You only need to fill the selectors (CSS or jQuery-like selector) of the existing pagination elements. You’ll input the selectors in Admin Settings Page (Settings > Responsive Pagination)
<h4>Method B : Create new Pagination Programmatically from Scratch</h4>
This method will need you to insert PHP code into template files directly using Responsive Pagination API. This method supports queries using WP_Query, or even something more generic without WP_Query.
<h3>Responsive Pagination API (For Programmatic Usage)</h3>
Note : This API section is a short guide for creating responsive pagination programmatically. However, there is easier solution using this plugin without touching any code – that is by converting your theme’s existing pagination from within Admin Settings Page with just providing its CSS/jQuery selector.
If you want to create responsive pagination programmatically, this plugin adds new function for you to use, which will render a new pagination where you put the function.
<pre><code><?php create_responsive_pagination( $id, $args ) ?>
</code></pre>
Parameters :
<ul>
<li><code>$id</code>: (string) (required) ID for the new pagination you want to create in kebab-case format.</li>
<li>
<code>$args</code> : (WP_Query | array) (required) <a href="https://developer.wordpress.org/reference/classes/wp_query/" rel="nofollow ugc">WP_Query</a> instance, or an associative array contains :
<ul>
<li><code>$current</code> : (int) Current page</li>
<li><code>$total</code>: (int) Total pages</li>
<li><code>$urlFirstPage</code> : (string) URL for first page</li>
<li><code>$urlPattern</code>: (string) URL pattern for this pagination by using <code>{pagenum}</code> tag.</li>
</ul>
</li>
</ul>
Note : Pagination settings and Breakpoint Configurations are still configured from within Admin Settings Page.
<h4>Example (For Programmatic Usage)</h4>
Example for creating pagination for posts within main loop using WP_Query. This also works with custom post type as long as you have WP_Query within loop.
<pre><code><?php
 global $wp_query; // or some custom WP_Query instance
 if( function_exists( 'create_responsive_pagination' ) ) {
 create_responsive_pagination( 'my-pagination-id', $wp_query );
 }
?>
</code></pre>
Example for creating a more generic pagination by providing your own data for current page, total pages, URL first page, and URL pattern without WP_Query.
<pre><code><?php
 if( function_exists( 'create_responsive_pagination' ) ) {
 create_responsive_pagination( 'my-pagination-id', array(
 'current' => $my_current_page, // your current page here
 'total' => $my_total_pages, // your total page here
 'url_first_page' => 'https://www.example.com/archives/', // URL when current page = 1
 'url_pattern' => 'https://www.example.com/archives/page/{pagenum}' // the pattern using {pagenum} tag
 ) );
 }
?>
</code></pre>

Responsive Pagination

Configure your paginations to adapt to different screen size like phones, tablets, and desktops.

Ben Balter

paul.irish

beaver6813

Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.
When a user scrolls towards the bottom of the page, the next page of posts is automatically retrieved and appended. This means they never need to click “Next Page”, which dramatically increases stickiness.
Features:
<ul>
<li>Works out-of-the-box for many popular WordPress themes — just activate the plugin and scroll</li>
<li>Fully customizable to adapt to your site and theme</li>
<li>Requires no (hopefully) template hacking, only a knowledge of CSS selectors.</li>
<li>Relies on shared database of common themes to simplify installation process</li>
<li>Maintain local database of theme presets for all installed themes (shared across network on multisite installs)</li>
<li>Countless API endpoints to modify the behavior.</li>
<li>Backwards compatible: Will not break RSS readers, mobile devices, or browsers with javascript</li>
</ul>
Full information on <a href="http://www.infinite-scroll.com" rel="nofollow ugc">infinite-scroll.com</a>

Infinite-Scroll

Automatically append the next page of posts (via AJAX) to your page when a user scrolls to the bottom.

Responsive Pagination vs Infinite-Scroll