0

I have a page with all my blog posts in it and I have it set to show all my posts on one page. (See screenshot) Now am I looking for away to only show 10 posts at a time and on scroll show more. I see there are plugins like this https://en-ca.wordpress.org/plugins/ajax-load-more/ but this needs a pagination, I do not want a pagination because of SEO reasons. (new SEO errors come up when a new page for the pagination comes up)

Is there away to this with jquery or javascript?

2
  • You want to load all the posts at one time? The loading will slow.
    – amiad
    Commented Feb 24, 2022 at 21:44
  • I am okay with that
    – user979331
    Commented Feb 24, 2022 at 22:28

1 Answer 1

0

Load all the posts and hide them exclude 10. If the user scroll to page bottom show more 10.

$('article').each((i, el) => {
   if (i > 9){
      $(el).hide();
   }
});
$(window).scroll(() => {
       if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
          $('article:hidden').first().show();
    }
});
3
  • This works great, I am show 2 posts per a row, anyway I can show 2 at a time when scrolling? Right now it looks uneven every time I scroll
    – user979331
    Commented Feb 25, 2022 at 2:13
  • replace to $('article:hidden:lt(2)').show();. If the answer helped you, mark its with check.
    – amiad
    Commented Feb 25, 2022 at 7:26
  • Works like a charm! Thanks
    – user979331
    Commented Feb 27, 2022 at 4:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.