How to Add Pagination to a Custom Theme in WordPress

Today we learn how to add pagination to a custom theme in WordPress. Use pagination to bring you to the next and previous pages in your post page in WordPress.

How to Add Pagination to a Custom Theme in WordPress Without Plugin

How to add pagination to a custom theme in WordPress without a plugin, we will include the following code in the functions.php file of our custom theme and put a code where you want to show pagination so that pagination will appear in your custom theme.

Follow Step:-

Just add the following code to your functions.php file

// Numbered Pagination
if ( !function_exists( 'wpex_pagination' ) ) {
	
	function wpex_pagination() {
		
		$prev_arrow = is_rtl() ? '→' : '←';
		$next_arrow = is_rtl() ? '←' : '→';
		
		global $wp_query;
		$total = $wp_query->max_num_pages;
		$big = 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( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
				'format'		=> $format,
				'current'		=> max( 1, get_query_var('paged') ),
				'total' 		=> $total,
				'mid_size'		=> 3,
				'type' 			=> 'list',
				'prev_text'		=> $prev_arrow,
				'next_text'		=> $next_arrow,
			 ) );
		}
	}
	
}

Example:-

Add CSS Style

Add styles to your CSS file so your page layout looks good

ul.page-numbers {
	text-align: center;
}

ul.page-numbers li {
	display: inline-block;
	margin: 0px 5px;
}

ul.page-numbers li a {
	width: 50px;
	height: 50px;
	display: inline-block;
	text-align: center;
	line-height: 50px;
	font-size: 15px;
	color: #7a7a7a;
	border: 1px solid #eee;
	font-weight: 500;
	transition: all 0.3s;
}

ul.page-numbers li.active a {
	background-color: #f48840;
	border-color: #f48840;
	color: #fff;
}

ul.page-numbers li a:hover {
	color: #f48840;
}

Example:-

Paste this code where you want to add pagination

<?php wpex_pagination(); ?>

By doing this, pagination will appear in your WordPress custom theme.

How to Add Pagination to a Custom Theme in WordPress With Plugin

Install WP-PageNavi plugin

To add pagination to a custom theme in WordPress with a plugin you need to add a plugin called WP-PageNavi and add a code where you want to show the pagination as shown below

<?php wp_pagenavi(); ?>

Download the WP-PageNavi Plugin