There are generally two types of WordPress pagination you would see. One has the previous posts and the next posts link only, at the bottom of the page to navigate to next and previous lists of items or posts. Second shows all numbers of pages available to navigate to and the user can jump over any page directly without navigating to it one by one.
Example 1:
To add next page and previous page link, copy below code to your functions.php file or into plugins code.
<?php
/**
* Pagination Nav
**/
function pagination_nav() {
global $wp_query;
if ($wp_query->max_num_pages > 1) {
?>
<nav class="pagination" role="navigation">
<div class="nav-next"><?php previous_posts_link('← Previous page'); ?></div>
<div class="nav-previous"><?php next_posts_link('Next page →'); ?></div>
</nav>
<?php
}
}
?>
Css in style.css
nav.pagination {
display: block;
width: 100%;
}
.nav-previous {
float: right;
}
.nav-next {
float: left;
}
nav.pagination a {
color: text-decoration: none;
color: #fe8001;
transition: color 1s ease;
}
To show above pagination into your blog page, copy below code at the bottom of your template where you want the pagination to appear.
<?php pagination_nav(); ?>
Example 2:
To add page numbers bar, copy below code to your functions.php file or into plugins code.
<?php
/**
* Pagination Bar
**/
function pagination_bar() {
global $wp_query;
$total_pages = $wp_query->max_num_pages;
if ($total_pages > 1){
$current_page = max(1, get_query_var('paged'));
echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => '/page/%#%',
'current' => $current_page,
'total' => $total_pages,
));
}
}
?>
To show above pagination into your blog page, copy below code at the bottom of your template where you want the pagination to appear.
<nav class="pagination">
<?php pagination_bar(); ?>
</nav>
Css in style.css
.pagination li {
display: inline;
}
.pagination li a,
.pagination li a:hover,
.pagination li.active a,
.pagination li.disabled {
background-color: #ff2128;
border-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
color: #fff;
text-decoration:none;
}
.pagination li a {
background-color: #000;
}