How to Add Pagination on a WordPress Site (Text and Numeric)

When you own a site with lengthy content, then it is important to give pagination for easy navigation through pages. If there is no pagination, then your site will take longer to load every time which results in reduced traffic and ranking of your site. For better and faster site render, you need to have limited content on each web page and paginate them to easily navigate. Most of the WordPress theme comes with pagination by default which you can use or you can add your own pagination. The commonly used WordPress pagination is with numbers. If you don’t have pagination on your site, then let us see how to add one.

Methods to Add WordPress Pagination

There are two ways to add pagination to your WordPress blog or site and they are

• With Plugin
• Without Plugin

Add Pagination Using Plugin

There are several pagination plugins available on the WordPress plugin store which you can opt for instant and easy access. Some of the popular WordPress pagination plugins are

• WP-PageNavi
• WP-Paginate

WP-PageNavi

[1] From the WordPress plugin store, install and activate WP-PageNavi.

[2] Once activated, go to Settings and choose WP-PageNavi.

[3] Make any changes in the Text label and style (available as presets) if need or just leave it as default.

[4] Don’t make any changes that are placed between % unless you know about it.

[4] Save the changes.

[5] Go to WordPress Theme page and under archive page templates, select index.php.

[6] In that PHP file change the line previous_posts_link and next_posts_link with <?php wp_pagenavi(); ?>

[7] You can also add CSS code to improve pagination with some cool color and text, by opening the Plugin editor from the dashboard.

[8] Choose wp-pagenavi-css.css, and replace the code on the page with the code below

.wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
color: #FFF;
text-decoration: none;
background-color:#6FB7E9;
border: 1px solid #B2D1E5;
padding: 5px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #E9F2F9;
background-color:#6FB7E9;
}
.wp-pagenavi span.current {
font-weight: bold;
background-color:#3C8DC5;
}

[9] Here you can change any of desired colors and font to the pagination.

Also, see How to Add Back to Top Button in WordPress in 3 Easy Ways

WP-Paginate

[1] From the WordPress plugin store, install and activate WP-Paginate.

[2] Once activated, go to Settings and choose WP-Paginate.

[3] Here you can edit the text label, location & position, button style (available as presets), etc.

[4] Also, you can edit the Custom CSS code as per your need.

[5] Save the change and you will have pagination on your site.

Add Pagination Without Plugin (Manually)

If you are good at coding, you can make your own WordPress custom pagination and add it to your site by going to your theme editor, open the Function.php file, and add the code here. You can use the code below, (from https://gist.github.com/wpscholar/1243396)

<?php
/**
Create numeric pagination in WordPress
*/
// Get total number of pages
global $wp_query;
$total = $wp_query->max_num_pages;
// Only paginate if we have more than one page
if ( $total > 1 ) {
// Get the current page
if ( !$current_page = get_query_var('paged') )
$current_page = 1;
// Structure of “format” depends on whether we’re using pretty permalinks
$format = empty( get_option('permalink_structure') ) ? '&page=%#%' : 'page/%#%/';
echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => $format,
'current' => $current_page,
'total' => $total,
'mid_size' => 4,
'type' => 'list'
));
}

You can also add a CSS file in Theme editor >> style.css file to give some color and effect to your pagination code.

Conclusion

These are some of the possible ways to add pagination to your WordPress site. If you add code for text label or use both text and numeric, that is totally up to you. You can pick any of the above-mentioned methods, the choice is completely yours. If you have any queries let us know in the comments section below.