Wordpress PHP How to add a Load More feature by using AJAX/JQUERY

Question

I want to add a "Load more" feature to my Wordpress page by using ajax and jquery. Right now, I get five items of my data by setting posts_per_page => 5 but for some reason, when I click my Load more button, it always loads the same five items/posts, so can someone maybe tell me what I'm doing wrong?

Here is my PHP code(functions.php)

$args = array(
  'post_type' => array('news'),
  'post_status' => array('publish'),
  'posts_per_page' => 5
);

$query = new WP_Query($args);

And here is my JS code:

let news_offset = 5;
loadMore(news_offset);

$('.loadmore').on("click", e => {
  e.preventDefault();
  news_offset++;
  loadMore(news_offset);
});

function loadMore(news_offset) {
  $.ajax({
    url: "/wp-admin/admin-ajax.php",
    data: {
      action: "fetch_news",
      offset: news_offset
    },
    success: function(data) {
      // Append results to DOM
      $(".news").append(data);
    },
    error: function(errorThrown) {
      console.log(errorThrown);
    }
  });
 }

Every suggestion or kind of input is welcome :-)

i am not a wordpress person but how should wp know that you want the next five? i guess if you dont specify, $query = new WP_Query($args); always returns the newest 5. cant you add a sort or offset? — Alex
– Alex, Commented Aug 13, 2018 at 7:56

Shahin · Accepted Answer · 2018-08-13 08:28:32Z

3

Please add offset to the WP_query

$my_offset = $_POST['offset'];  //Fetch offset from the ajax request
$args = array(
  'post_type' => array('news'),
  'post_status' => array('publish'),
  'posts_per_page' => 5,
  'offset' => $my_offset
);
$query = new WP_Query($args);

In you JS code :

let news_offset = 5;            //Start with 0 if you don't have posts on page
loadMore(news_offset);

$('.loadmore').on("click", e => {
  e.preventDefault();
  news_offset += 5;            //Increment by 5
  loadMore(news_offset);
});

function loadMore(news_offset) {
  $.ajax({
    url: "/wp-admin/admin-ajax.php",
    method: "POST",
    data: {
      action: "fetch_news",
      offset: news_offset
    },
    success: function(data) {
      // Append results to DOM
      $(".news").append(data);
    },
    error: function(errorThrown) {
      console.log(errorThrown);
    }
  });
 }

edited Aug 13, 2018 at 8:28

answered Aug 13, 2018 at 8:02

Shahin

5454 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ST80 Over a year ago

for some reason I don't know, $my_offset = $_GET['offset'] does not work, I get a blank page :-/

Shahin Over a year ago

I've updated the answer, Please use ajax with POST instead of GET.

Collectives™ on Stack Overflow

Wordpress PHP How to add a Load More feature by using AJAX/JQUERY

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related