Implement WordPress Pagination From Scratch

In this article you find all the necessary code to implement wordpress pagination in your blog, or on a custom template. It does not matter if you query for normal wordpress posts or for a specific custom post type.

First of all you need to make a query to get posts you need to show in the page. 

$args = array(
   'post_type'         => 'post',
   'public'            => true,
   'posts_per_page'    => 4,
   'suppress_filters'  => true,
   'paged'             => $paged,
   'order'             => 'DESC'
);

As you can see is the default array to get all posts. What is most important in this array that leads to implement the pagination is the "paged" argument because as you will see a little below the variable $paged get every time the page number using the following function:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

Don't forget to change "posts_per_page" with how many posts you need on the page. The above function should be placed before the $args array if not you will get an error with undefined variable. In the following we will use the query loop to add posts in page.

$the_query = new WP_Query($args);  
while ( $the_query->have_posts() ) : $the_query->the_post();?>
<div class="post">
<a href="<?=get_permalink($post->ID);"><?=$post->post_title;?></a>
</div>
<?php endwhile;?>

 

If you completed all the steps, at this moment you should see on your page 4 titles of your posts. Anyway the code above is a default query loop in wordpress, in the following we will go to the pagination part of the tutorial. If you are interested in learning how to get blog posts by ajax use the link.

If you already have the posts on your page and only want to add the pagination, you need to find the above code, the while loop and just add "posts_per_page" and "paged" attributes in the array, then copy-paste the $paged variable above the array. Next, we will use wordpress function to get the pagination for our blog.

$args = array(
  'base'               => '%_%',
  'format'             => '/blog/page/%#%',
  'total'              => $the_query->max_num_pages,
  'current'            => max( 1, get_query_var('paged') ),
  'show_all'           => false,
  'end_size'           => 2,
  'mid_size'           => 3,
  'prev_next'          => true,
  'prev_text'          => __('Previous'),
  'next_text'          => __('Next'),
  'type'               => 'plain',
  'add_args'           => false,
  'add_fragment'       => '',
  'before_page_number' => '',
  'after_page_number'  => ''
  ); 
echo paginate_links($args);

 

This argument has a lot of properties but all of them can be found on wordpress documentation.

  • Base - this is used to create the pagination link, this is default.
  • format - I used this structure in the above example because I use pretty premalinks the default is with GET parameter
  • total - is the total amount of pages, and the above function get from the_query var the max number of pages
  • current - is the current page
  • show_all - this is used if you want to show all pages in the paginatin without "..."
  • end_size - if show_all is false, end_size will be used to get the number of last items. How many pages you want to show after the "..." delimiter
  • mid_size - the same like end_size, but this is used for the first elements, before the delimiter.

After you put the above code in your page you should see pagination. If you have any questions please let them in the comments section. I hope this code will help you to implement a nice wordpress pagination, in the next articles I will post a tutorial to implement this pagination by ajax.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x