How to Add pagination to Post Loop.

Home/Wordpress tricks/How to Add pagination to Post Loop.

How to Add pagination to Post Loop.

What is pagination

By default worpress shows links for next and previous posts. Older will show the ten previous posts and newer will show the next ten posts. It is desireable to add page numbers for posts, so that you know how many post pages are there and you can move to any desired page by one click. Pagination gives navigation ease plus a more professional look to your post loop. You must have seen pagination below post loop which looks like this,

How to add pagination to Post loop

There are two ways of adding pagination to post loops. One is through a plugin and the other is through writing some code in your wp_query.

Pagination Through Plugin

I have used a pagination plugin called “WP Page Numbers” . Its a nice plugin, it gives you few templates of pagination to work with. You can choose any of them to suit your theme colors. Below you can see the templates available within the plugin itself.

Pagination through Code

For displaying page number below a post loop, you have to do 3 things

  1. add the $paged parameter to wp_query
  2. write a custom page navigation function in functions.php
  3. create a file called paginate.php
  4. include the paginate.php after the loop to display page numbers

Lets start writing code. First open your functions.php and add this code

// WP-PageNavi axactsoft

function custom_wp_pagenavi($before = '', 
$after = '', $prelabel = '', $nxtlabel = '', $pages_to_show = 5, $always_show = false) {
	global $request, $posts_per_page, $wpdb, $paged;
	if(empty($prelabel)) {
		$prelabel  = '<strong>«</strong>';
	if(empty($nxtlabel)) {
		$nxtlabel = '<strong>»</strong>';
	$half_pages_to_show = round($pages_to_show/2);
	if (!is_single()) {
		if(!is_category()) {
			preg_match('#FROM\s(.*)\sORDER BY#siU', $request, $matches);
		} else {
			preg_match('#FROM\s(.*)\sGROUP BY#siU', $request, $matches);
		$fromwhere = $matches[1];
		$numposts = $wpdb->get_var("SELECT COUNT(DISTINCT ID) FROM $fromwhere");
		$max_page = ceil($numposts /$posts_per_page);
		if(empty($paged)) {
			$paged = 1;
		if($max_page > 1 || $always_show) {
			echo "$before</pre>
<div class="\"wp-pagenavi\""><span class="\"pages\"">Page $paged of $max_page:</span>";
 if ($paged >= ($pages_to_show-1)) {
 echo '<a href="'.get_pagenum_link().'">« First</a> ';
 for($i = $paged - $half_pages_to_show; $i = 1 && $i if($i == $paged) {
 echo "<strong class="current">$i</strong>";
 } else {
 echo ' <a href="'.get_pagenum_link($i).'">'.$i.'</a> ';
 next_posts_link($nxtlabel, $max_page);
 if (($paged+$half_pages_to_show) < ($max_page)) {
 echo ' <a href="'.get_pagenum_link($max_page).'">Last »</a>';
 echo "</div>

Now create a file and name it as paginate.php. The code in paginate.php goes to the template file where you have the post loop. Save paginate.php in your active theme’s folder. you will include paginate.php after every loop you want to add pagination to.

<?php if (is_single()) { ?></pre>
<div id="post-navigator-single"></div>
<?php } else if (is_page()) { ?></pre>
<div id="post-navigator"><?php link_pages('<strong>Page ', '', 'number'); ?>
<div class="clearfix">
<?php } else if (is_tag()) { ?>

<div id="post-navigator"></div>
<?php } else { ?></pre>
<div id="post-navigator"><?php if (function_exists('custom_wp_pagenavi')) : ?>
<?php custom_wp_pagenavi(); ?>
<?php else : ?>
<div class="alignleft"></div>
<div class="alignright"></div>
<?php endif; ?>
<div class="clearfix"></div>
<?php } ?>

Now open the page containing the loop where you need to add pagination. In my case it was index.php. Above the main loop before the code for the Loop starts add this

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $wp_query=new Wp_Query('paged='.$paged); ?>

I hope you understand the code above. The $paged will get the value of page from the wp_query and then on second line it tells the query which page posts to display.

Now finally to the last page is to include the paginate.php after the loop. Remember to include the paginate file after the loop ends. This can be after the endif; or the endwhile; . The code to include paginate.php is

<?php include (TEMPLATEPATH . '/paginate.php'); ?>

Any questions are welcome. You can check out the pagination on my homepage below the posts. It is done by the same code i have explained in this post. So go ahead, write your post loops with page numbers !!

Yumna Tatheer

Yamna Tatheer is a WordPress Plugin developer and a Top-Rated Upwork professional. She is a part-time blogger from Lahore and loves to write about wordpress and freelance industry.

More Posts

Follow Me:

About the Author:

Yamna Tatheer is a Wordpress Plugin developer and a Top-Rated Upwork professional. She is a part-time blogger from Lahore and loves to write about wordpress and freelance industry.

Leave A Comment

WhatsApp chat