How to add pagination to WordPress theme?

While developing a custom WordPress theme for a blog most of us were stuck in the numeric pagination of archives. By default, WordPress has implemented simple pagination which enables the Next Page and Previous Page navigation function and that can be added by a single line of code, but that looks outdated and inconvenient for large blogs. Thus, here I have code to add numeric pagination in the WordPress theme.

You can easily implement this to index, archives, and similar pages wherever you need pagination. Before I start the tutorial, I’m assuming that you have made a backup of your blog and know the theme building.

Add PHP instructions to the functions.php file:

if ( !function_exists( 'atulhost_pagination' ) ) {
    function atulhost_pagination() {
        $prev_arrow = is_rtl() ? 'Old →' : '← New';
        $next_arrow = is_rtl() ? '← New' : 'Old →';
        global $wp_query;
        $total = $wp_query->max_num_pages;
        $last = 999999999; // need an unlikely integer
        if( $total > 1 )  {
            if( !$current_page = get_query_var('paged') )
                $current_page = 1;
            if( get_option('permalink_structure') ) {
                $format = 'page/%#%/';
            } else {
                $format = '&paged=%#%';
            }
            echo paginate_links(array(
                'base' => str_replace( $last, '%#%', esc_url( get_pagenum_link( $last ) ) ),
                'format' => $format,
                'current' => max( 1, get_query_var('paged') ),
                'total' => $total,
                'mid_size' => 3,
                'type' => 'list',
                'prev_text' => $prev_arrow,
                'next_text' => $next_arrow,
            ) );
        }
    }
}

Save it and add the PHP function to all indexes and archives:

<?php if ( $wp_query->max_num_pages > 1 ) : ?>
	<div class="navigation">
		<?php atulhost_pagination(); ?>
	</div>
<?php endif; ?>

Now we are almost done. Just need little styling here to match your theme.

I have added basic CSS beautifications, you can take it to the next level.

Add the following CSS styles to the style.css file:

.navigation{
    background: rgb(255 255 255);
    color: rgb(0 0 0);
    display: flex;
    font-size: 1.125em;
    font-weight: 700;
    flex-wrap: wrap;
    grid-gap: 0.625rem;
    justify-content: center;
    padding: 2rem;
}
.navigation a,
.navigation span {
    display:inline-block;
}
.page-numbers {
    margin: 0;
    padding: 0;
}
.page-numbers li{
    display: block;
    float: left;
    margin: 0.125rem;
    text-align:center;
}
.page-numbers a,
.page-numbers span {
    display:block;
    padding: 0.625em;
    cursor: pointer;
    border:0.0625rem solid rgb(0 0 0);
    border-radius: 0.3125rem;
}
.page-numbers a span {
    padding:0;
}

Now we are done here. You may need to match the CSS styling to match your theme’s outlook.