How to Add Pagination in WordPress to Replace Prev/Next Navigation

by
Spread the love

If you decide to start a WordPress blog, the default setting for the WordPress pagination archive pages is Prev/Next. That setting is sufficient for most people who likely wouldn’t give it a second thought. But if you’re the picky sort who likes to tweak every little thing, you may want your pages to show page numbers instead.

If this is the case, you have two options. You can either tweak the code or you can take the easy way out and use a plugin.

Content

Add Pagination to a WordPress Blog Without a Plugin

If the idea of using yet another plugin isn’t very appealing (they do slow down your site after all), then you may decide that tweaking the code is the best way to go. It’s actually not that difficult if you know where to look. If you don’t know, we will show you.

First, you need a FTP program. This is simply a program that logs into your website and displays the site’s files. The most popular one is FileZilla, but you can use any one you wish. I personally use CyberDuck. Both are free, but CyberDuck has an annoying popup to donate to the developer.

Log into your site using your FTP program and you will see the files.

Now look for a file called functions.php. It is found in your theme folder which is usually located at /wp-content/themes/NAME OF THEME. Open the functions.php file with a text editor, and add the following to the end of the file. Remember to save the file changes afterward.

function numeric_posts_nav() {
 
    if( is_singular() )
        return;
 
    global $wp_query;
 
    /** Stop execution if there's only 1 page */
    if( $wp_query->max_num_pages <= 1 )
        return;
 
    $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
    $max   = intval( $wp_query->max_num_pages );
 
    /** Add current page to the array */
    if ( $paged >= 1 )
        $links[] = $paged;
 
    /** Add the pages around the current page to the array */
    if ( $paged >= 3 ) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
 
    if ( ( $paged + 2 ) <= $max ) {
        $links[] = $paged + 2;
        $links[] = $paged + 1;
    }
 
    echo '
' . "\n";
 
    /** Previous Post Link */
    if ( get_previous_posts_link() )
        printf( '
%s
' . "\n", get_previous_posts_link() );
 
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
        $class = 1 == $paged ? ' class="active"' : '';
 
        printf( '%s' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
 
        if ( ! in_array( 2, $links ) )
            echo '
…
';
    }
 
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort( $links );
    foreach ( (array) $links as $link ) {
        $class = $paged == $link ? ' class="active"' : '';
        printf( '%s' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
    }
 
    /** Link to last page, plus ellipses if necessary */
    if ( ! in_array( $max, $links ) ) {
        if ( ! in_array( $max - 1, $links ) )
            echo '
…
' . "\n";
 
        $class = $paged == $max ? ' class="active"' : '';
        printf( '%s' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
    }
 
    /** Next Post Link */
    if ( get_next_posts_link() )
        printf( '
%s
' . "\n", get_next_posts_link() );
 
    echo '
' . "\n";
 
}

Next, open the file where the pagination is shown. This is usually the index.php and archive.php file. Paste the following code to display the pagination.

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

Now you have to add some custom CSS code. This section can be found in WordPress Admin, under the Appearance -> Custom CSS Code section. But various themes have it in different places. You may have to browse to find it.

Once you’ve got it, add the code below. Again, don’t forget to save your changes.

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    color: #fff;
    text-decoration:none;
}
 
.navigation li {
    display: inline;
}
 
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    background-color: #6FB7E9;
    border-radius: 3px;
    cursor: pointer;
    padding: 12px;
    padding: 0.75rem;
}
 
.navigation li a:hover,
.navigation li.active a {
    background-color: #3C8DC5;
}

If you now check your blog archive pages, you’ll see numbering at the bottom. You can add styling to it if you wish, by changing the padding, background color, and so on.

To restore the old Prev-Next navigation, simply retrace the steps outlined above and remove the code you added.

Can I split a single WordPress post or page into multiple pages?

If you are writing a really long article, it is beneficial to split the post up into different pages. This makes the article easier to digest if the reader is not endlessly scrolling.

To add page breaks, add the Gutenberg block Page Break, wherever you would like to split the page. Simply start typing /page and it will appear in a pop-up menu.

This then adds a page break. Repeat the process whenever you want to break the page again.

Use a WordPress Plugin to Replace Prev/Next With Numbers

If the idea of changing the code gives you heart flutters, then you’ll be happy to know there is a plugin that can help calm your nerves. In fact, there are several plugins (which we will mention in the next section.) But the best one seems to be WP-PageNavi which switches the Pre/Next to numbers.

First, go to the Plugins section of your WordPress site and search for WP-PageNavi. Once you’ve found it, click Install Now.

Now go to the installed plugin and click Settings.

It’s best to leave these settings as they are, unless you have particular requirements and know what you are doing.

Scroll further down the page to find Page Navigation Options. Among other things, you can specify the number of pages to show in the navigation bar.

One last step. Find your index.php file and your archive.php file. Look for previous_posts_link and next_posts_link. Replace it with :

<?php wp_pagenavi(); ?>

If you now go to the bottom of your blog page, you will see numbers instead of Prev/Next.

If you want to reverse this in the future, simply disable and uninstall the plugin.

Additional Plugins for WordPress Pagination

If for any reason you don’t want to use WP-PageNavi, there are two other plugin options. You will find more if you look on Google, but you will quickly find that they either have an unreasonable price tag or the plugin hasn’t been updated in years.

Note: Do not use one which is years out of date. There are likely security vulnerabilities that a hacker can take advantage of.

1. Pagination

Pagination has lots of options at its disposal, but at its core, it simply adds customization to various archive pages, such as the blog archive, search results, categories, tags, and author pages.

2. WP-Paginate

The other option is WP-Paginate. This one provides more opportunities for style customizations, such as changing the colors of the number boxes.

Pagination is something that should be seriously looked at when making a new WordPress website and/or a WordPress blog. Pagination provides more links to your site and those pages are then indexed by Google.

WordPress is extremely flexible, and you can customize various other aspects of your site such as the admin dashboard, sitemap, and RSS feeds.

All screenshots by Mark O’Neill.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox

Sign up for all newsletters.
By signing up, you agree to our Privacy Policy and European users agree to the data transfer policy. We will not share your data and you can unsubscribe at any time. Subscribe


Mark O’Neill

Mark O’Neill is a freelance tech journalist, editor, and bestselling spy fiction author. Originally from Scotland, he now lives in Germany with his wife and his dog.

Leave a comment