Pagination Without Page Reload Using Ajax In WordPress

In this article, we are going to learn about how to create pagination without page reload by using ajax in WordPress.

what is pagination :
Pagination is a method of dividing web content into some pages, thus presenting content in a limited and digestible manner.

First, you have to add following code in your functions.php file to call ajax in your template

add_action( 'wp_ajax_demo_pagination_posts', 'demo_pagination_posts' );
add_action( 'wp_ajax_nopriv_demo_pagination_posts', 'demo_pagination_posts' ); 

function demo_pagination_posts() {
  global $wpdb;
  $msg = '';
  if(isset($_POST['page'])){
    $page = sanitize_text_field($_POST['page']);
    $cur_page = $page;
    $page -= 1;
    $per_page = 2;
    $previous_btn = true;
    $next_btn = true;
    $start = $page * $per_page;

    // Set the table where we will be querying data
    $table_name = $wpdb->prefix . "posts";

    // Query the posts
    $all_blog_posts = $wpdb->get_results($wpdb->prepare("
      SELECT * FROM " . $table_name . " WHERE post_type = 'post' AND post_status = 'publish' ORDER BY post_date DESC LIMIT %d, %d", $start, $per_page ) );

    // At the same time, count the number of queried posts
      $count = $wpdb->get_var($wpdb->prepare("
      SELECT COUNT(ID) FROM " . $table_name . " WHERE post_type = 'post' AND post_status = 'publish'", array() ) );

    // Loop into all the posts
    foreach($all_blog_posts as $key => $post): 
      $msg .= '
      <div class = "col-md-12">       
        <h2>' . $post->post_title . '</a></h2>
        <p>' . $post->post_content . '</p>
      </div>';
    endforeach;
   
    $no_of_paginations = ceil($count / $per_page);
    if ($cur_page >= 7) {
      $start_loop = $cur_page - 3;
      if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
      else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
      } else {
        $end_loop = $no_of_paginations;
      }
    } else {
      $start_loop = 1;
      if ($no_of_paginations > 7)
        $end_loop = 7;
      else
        $end_loop = $no_of_paginations;
    }

    // Pagination Buttons     
    $pag_container .= "
    <div class='pagination-link'>
      <ul>";
        if ($previous_btn && $cur_page > 1) {
          $pre = $cur_page - 1;
          $pag_container .= "<li p='$pre' class='active'>Previous</li>";
        } else if ($previous_btn) {
          $pag_container .= "<li class='inactive'>Previous</li>";
        }
        for ($i = $start_loop; $i <= $end_loop; $i++) {
          if ($cur_page == $i)
            $pag_container .= "<li p='$i' class = 'selected' >{$i}</li>";
          else
            $pag_container .= "<li p='$i' class='active'>{$i}</li>";
        }
        if ($next_btn && $cur_page < $no_of_paginations) {
          $nex = $cur_page + 1;
          $pag_container .= "<li p='$nex' class='active'>Next</li>";
        } else if ($next_btn) {
          $pag_container .= "<li class='inactive'>Next</li>";
        }
        $pag_container = $pag_container . "
      </ul>
    </div>";
    echo 
    '<div class = "pagination-content">' . $msg . '</div>' . 
    '<div class = "pagination-nav">' . $pag_container . '</div>';
  }
  die();
}

Now add this following code where you want to display your post (like index.php, home.php), here I will add this code in one template file.

<?php 
/*
Template Name: pagination
*/
get_header(); ?>
<div class="wrap">
  <div id="primary" class="content-area">
    <div class="col-md-12 content">
      <div class = "inner-box content no-right-margin darkviolet">
        <script type="text/javascript">
          jQuery(document).ready(function($) {
            // This is required for AJAX to work on our page
            var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
            function load_all_posts(page){
              var data = {
                page: page,
                action: "demo_pagination_posts"
              };
              // Send the data
              $.post(ajaxurl, data, function(response) {
                $(".pagination_container").html(response);
              });
            }
            load_all_posts(1); // Load page 1 as the default
            $('.pagination_container .pagination-link li.active').live('click',function(){
              var page = $(this).attr('p');
              load_all_posts(page);
            });

          }); 
        </script>
        <div class = "pag_loading">
          <div class = "pagination_container">
            <div class="post-content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<?php get_footer();

And at the last put this code into your style.css to style your pagination

.pag_loading {
  padding: 20px;
  background-color: #ccc;
}
.pagination-link ul {
  margin: 0; 
  padding: 0;
}
.pagination-link ul li {
  display: inline; 
  margin: 3px; 
  padding: 4px 8px; 
  background: #FFF; 
  color: black; 
}
.pagination-link ul li.active:hover {
  cursor: pointer;
  background: #1E8CBE; 
  color: white; 
  }
.pagination-link ul li.inactive {
  background: #7E7E7E;
  }
.pagination-link ul li.selected {
  background: #1E8CBE;
  color: white;
}

Now, create one page and select a template “pagination” so you can be show results as below.

3 Comments

  1. alejandro ferguson

    thanks for this article!
    the front end looks exatly as on your screenshots but I get the same error as Gagan Bafna.
    Where should I add that code?
    $(‘#parentElement’).on(‘click’, ‘.myButton’, function)

    I put it this way but nothing is displayed
    load_all_posts(1); // Load page 1 as the default
    /*$(‘.pagination_container .pagination-link li.active’).live(‘click’,function(){ */
    $(‘#parentElement’).on(‘click’, ‘.myButton’, function) {
    var page = $(this).attr(‘p’);
    load_all_posts(page);
    });

    Reply
  2. Gagan Bafna

    Pagination is not working. Display error in the console
    Uncaught TypeError: $(…).live is not a function
    at HTMLDocument. ((index):800)
    at e (jquery.min.js?ver=3.5.1:2)

    Reply
    1. Hiral solanki

      you can use in place of live function
      $(‘#parentElement’).on(‘click’, ‘.myButton’, function)

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories