Load posts Infinite scroll with ajax in wordpress

Generally, we saw in many websites with pagination at the bottom. The concept of pagination comes with an idea that if you have a lot of posts in your website then instead of showing all the posts in one page, you can show that in that page but with different sections. These sections are called pagination parts. For more information about pagination, visit our this post about how to implement pagination in wordpress. In the current post, we will discus about how to implement infinite scroll to load the posts using ajax.

As we know that ajax is a very powerful tool that provides a feature that we can do any task without even refreshing the page. Currently, almost every website use this feature to load the data or even images. We will also use this feature to implement our task.

To do so, follow these simple steps:

Step 1:

First of all, we will call the ajax inside the header section of our website because header section is always called before any other section. SO open your header.php file and copy- paste the following code into that file.

Step 2:

Now your header part is ready with the ajax functionality. Now you have to take care offunction.php file. So open your function.php and copy paste the following code into that file.

Now you are almost there with complete ajax. In the last, you have to be sure that yourindex.php file should have a div with id=”content” as given in the following code:

Now your website is ready for loading the posts on infinite scroll with ajax.