Bagus Sasikirono

<p>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.</p>
<p>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 <em>Prev</em> and <em>Next</em> link when they’re using phones.</p>
<p>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.</p>
<h3>Two Different Methods to Apply Responsive Pagination</h3>
<p>You can choose the way you want to apply responsive pagination.</p>
<h4>Method A : Convert Existing Paginations (No Coding Required)</h4>
<p>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 (<em>CSS</em> or <em>jQuery</em>-like selector) of the existing pagination elements. You’ll input the selectors in Admin Settings Page (<em>Settings > Responsive Pagination</em>)</p>
<h4>Method B : Create new Pagination Programmatically from Scratch</h4>
<p>This method will need you to insert PHP code into template files directly using <em>Responsive Pagination API</em>. This method supports queries using <em>WP_Query</em>, or even something more generic without <em>WP_Query</em>.</p>
<h3>Responsive Pagination API (For Programmatic Usage)</h3>
<p><em>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.</em></p>
<p>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.</p>
<pre><code><?php create_responsive_pagination( $id, $args ) ?>
</code></pre>
<p>Parameters :</p>
<ul>
<li><code>$id</code>: <em>(string)</em> <em>(required)</em> ID for the new pagination you want to create in <em>kebab-case</em> format.</li>
<li>
<p><code>$args</code> : <em>(WP_Query | array)</em> <em>(required)</em> <a href="https://developer.wordpress.org/reference/classes/wp_query/" rel="nofollow ugc">WP_Query</a> instance, or an associative array contains :</p>
<ul>
<li><code>$current</code> : <em>(int)</em> Current page</li>
<li><code>$total</code>: <em>(int)</em> Total pages</li>
<li><code>$urlFirstPage</code> : <em>(string)</em> URL for first page</li>
<li><code>$urlPattern</code>: <em>(string)</em> URL pattern for this pagination by using <code>{pagenum}</code> tag.</li>
</ul>
</li>
</ul>
<p>Note : Pagination settings and Breakpoint Configurations are still configured from within Admin Settings Page.</p>
<h4>Example (For Programmatic Usage)</h4>
<p>Example for creating pagination for posts within main loop using <em>WP_Query</em>. This also works with custom post type as long as you have <em>WP_Query</em> within loop.</p>
<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>
<p>Example for creating a more generic pagination by providing your own data for current page, total pages, URL first page, and URL pattern without <em>WP_Query</em>.</p>
<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.

scribu

Lester Chan

<p>Want to replace the old <em>← Older posts | Newer posts →</em> links with some page links?</p>
<p>This plugin provides the <code>wp_pagenavi()</code> template tag which generates fancy pagination links.</p>
<h3>Usage</h3>
<p>In your theme, you need to find calls to next_posts_link() and previous_posts_link() and replace them.</p>
<p>In the Twentyten theme, it looks like this:</p>
<pre><code><div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
</code></pre>
<p>You would replace those two lines with this:</p>
<pre><code><?php wp_pagenavi(); ?>
</code></pre>
<p>For multipart pages, you would look for code like this:</p>
<pre><code><?php wp_link_pages( ... ); ?>
</code></pre>
<p>and replace it with this:</p>
<pre><code><?php wp_pagenavi( array( 'type' => 'multipart' ) ); ?>
</code></pre>
<p>Go to <em>WP-Admin -> Settings -> PageNavi</em> for configuration.</p>
<h3>Changing the CSS</h3>
<p>If you need to configure the CSS style of WP-PageNavi, you can copy the <code>pagenavi-css.css</code> file from the plugin directory to your theme’s directory and make your modifications there. This way, you won’t lose your changes when you update the plugin.</p>
<p>Alternatively, you can uncheck the “Use pagenavi.css?” option from the settings page and add the styles to your theme’s style.css file directly.</p>
<h3>Changing Class Names</h3>
<p>There are <a href="https://codex.wordpress.org/Glossary#Filter" rel="nofollow ugc">filters</a> that can be used to change the default class names that are assigned to page navigation elements.</p>
<h4>Filters</h4>
<ul>
<li><code>wp_pagenavi_class_pages</code></li>
<li><code>wp_pagenavi_class_first</code></li>
<li><code>wp_pagenavi_class_previouspostslink</code></li>
<li><code>wp_pagenavi_class_extend</code></li>
<li><code>wp_pagenavi_class_smaller</code></li>
<li><code>wp_pagenavi_class_page</code></li>
<li><code>wp_pagenavi_class_current</code></li>
<li><code>wp_pagenavi_class_larger</code></li>
<li><code>wp_pagenavi_class_nextpostslink</code></li>
<li><code>wp_pagenavi_class_last</code></li>
</ul>
<h4>Filter Usage</h4>
<pre><code>// Simple Usage - 1 callback per filter
add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_previouspostslink_class');
add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_nextpostslink_class');
add_filter('wp_pagenavi_class_page', 'theme_pagination_page_class');

function theme_pagination_previouspostslink_class($class_name) {
  return 'pagination__control-link pagination__control-link--previous';
}

function theme_pagination_nextpostslink_class($class_name) {
  return 'pagination__control-link pagination__control-link--next';
}

function theme_pagination_page_class($class_name) {
  return 'pagination__current-page';
}


// More Concise Usage - 1 callback for all filters
add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_class');
add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_class');
add_filter('wp_pagenavi_class_page', 'theme_pagination_class');

function theme_pagination_class($class_name) {
  switch($class_name) {
    case 'previouspostslink':
      $class_name = 'pagination__control-link pagination__control-link--previous';
      break;
    case 'nextpostslink':
      $class_name = 'pagination__control-link pagination__control-link--next';
      break;
    case 'page':
      $class_name = 'pagination__current'
      break;
  }
  return $class_name;
}
</code></pre>
<h3>Development</h3>
<ul>
<li><a href="https://github.com/lesterchan/wp-pagenavi" title="https://github.com/lesterchan/wp-pagenavi" rel="nofollow ugc">https://github.com/lesterchan/wp-pagenavi</a></li>
</ul>
<h3>Credits</h3>
<ul>
<li>Plugin icon by <a href="http://www.simpleicon.com" rel="nofollow ugc">SimpleIcon</a> from <a href="http://www.flaticon.com" rel="nofollow ugc">Flaticon</a></li>
</ul>
<h3>Donations</h3>
<p>I spent most of my free time creating, updating, maintaining and supporting these plugins, if you really love my plugins and could spare me a couple of bucks, I will really appreciate it. If not feel free to use it without any obligations.</p>


WP-PageNavi

Adds a more advanced paging navigation interface.

Responsive Pagination vs WP-PageNavi