Install and Activate

  1. Unzip the downloaded WP-Paginate zip file
  2. Upload the wp-paginate folder and its contents into the wp-content/plugins/ directory of your WordPress installation
  3. Activate WP-Paginate from Plugins page

Implement

You can now configure the location and appearance of pagination links through WP-Paginate Settings rather than edit your theme files. See the Configure section.

For posts pagination:
* Open the theme files where you’d like pagination to be used. Depending on your theme, this could be in a number of files, such as index.php, archive.php, categories.php, search.php, tag.php, or the functions.php file(s).The twentyeleven theme places the pagination code in functions.php in the twentyeleven_content_nav() function.

Examples:

For the Twenty Seventeen theme, in index.php, replace:

the_posts_pagination( array(
    'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
    'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
) );

With:

if(function_exists('wp_paginate')):
    wp_paginate();  
else :
    the_posts_pagination( array(
        'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
        'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
        'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
    ) );
endif;

For the Twenty Sixteen theme, in index.php, replace:

    the_posts_pagination( array(
        'prev_text'          => __( 'Previous page', 'twentysixteen' ),
        'next_text'          => __( 'Next page', 'twentysixteen' ),
        'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>',
    ) );

With:

    if(function_exists('wp_paginate')):
        wp_paginate();  
    else :
        the_posts_pagination( array(
            'prev_text'          => __( 'Previous page', 'twentysixteen' ),
            'next_text'          => __( 'Next page', 'twentysixteen' ),
            'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>',
        ) );
    endif;

For the Twenty Fifteen theme, in index.php, replace:

        the_posts_pagination( array(
            'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
            'next_text'          => __( 'Next page', 'twentyfifteen' ),
            'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
        ) );

With:

        if(function_exists('wp_paginate')):
            wp_paginate();  
        else :
        the_posts_pagination( array(
            'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
            'next_text'          => __( 'Next page', 'twentyfifteen' ),
            'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
        ) );
      endif;

For comments pagination:
1) Open the theme file(s) where you’d like comments pagination to be used. Usually this is the comments.php file.

2) Replace your existing previous_comments_link() and next_comments_link() code block with the following:

<?php if(function_exists('wp_paginate_comments')) {
    wp_paginate_comments();
} ?>

Configure

1) Configure the WP-Paginate settings, if necessary, from the WP-Paginate option in the Settings menu

2) The styles can be changed with the following methods:

  • Add a wp-paginate.css file in your theme’s directory and place your custom CSS there
  • Add your custom CSS to your theme’s styles.css
  • Modify the wp-paginate.css file in the wp-paginate plugin directory

Note: The first two options will ensure that WP-Paginate updates will not overwrite your custom styles.

Upgrading

To 1.1.1+:

  • Update WP-Paginate settings, change Before Markup to <div class="navigation">
  • Update wp-paginate.css, change .wp-paginate ol to .wp-paginate