WordPress Themes

How to Build an Infinite Scrolling WordPress Site

An infinite scroll pagination is nothing but something that is inspired from Twitter and Facebook. Unlike other pagination, here user has the feature of scrolling to the bottom of the page. Basically, this is one of the methods of improving the experience that users goes through related to the website, but if you so something wrong, then it can provide a bad experience.

In case, if you are implement such kind of pagination, then you need to make sure that you don’t include any significant link at the bottom of the given page. The basic reason for this is that when a user clicks on the given link, the page will automatically load the new entries and then push the given link towards to the end of the screen each time. So, you have the either option to make the sidebar always visible (all the time) and even fix the position for the footer area.

The following are the steps involved:

Plan the Pagination

How to Build an Infinite Scrolling WordPress Site, and WhyIt is quite critical for planning ahead with regard to the pagination that includes on where you would like to include and how it is going to get processed. Now a basic means of doing pagination is simply listing the page number, right at the bottom of the given page. An important thing to keep in mind is that using this method no page number will be displayed at the end of the data or article list, because you won’t be needing it.

This given pagination would be always used for all the WordPress themes and that as long as it won’t contains all the kinds of information especially in the footer section, and there are chances that you won’t get the required effects. The infinite scroll pagination would be using the Ajax and jQuery functionality so that the request and retrieving a lot of articles can be done for the user.  

Creating the Ajax Function

One can use the WordPress Ajax functionality in order to make the basic call for such kind of pagination. First one would have to prepare a basic function for the given pagination and then you would need to insert the required codes to the functions.php of the theme. This is a common function and it would help in making calls for the pagination. Basically, one would need to give out two variables for this kind of function through Ajax. The first one is the page number and the next one is the file template which is going to be used for pagination.

In order to enable the function which has to be used with the WordPress Ajax, then one needs to follow the various codes. The one thing that you need to keep in mind is that the default action for the available WordPress Ajax needs to be the wp ajax. That is why the required name or the infinite scroll is a perfect example. Here one would be required to follow two kinds of action, one for the users who are logged in and another one is for the users who are not logged.

Once that is done, the next thing you would be needing is to create a ajax function which would create two kinds of variables that would be needing the pagination. So you would have to use the WordPress hooks and make sure that it is inserted into this jQuery function or simply insert the given themes as theme header.php.

Now this would be a basic call of the Ajax function which can be made and used for infinite scroll as the action name. The WordPress would automatically try to call the given function wp infinitepaginate () as it would help in defining the theme function.php.

Determining the User Scroll at the Bottom page

How to Build an Infinite Scrolling WordPress Site, and Why 2Enabling the infinite scroll pagination, one would be needing to find out when users hit the bottom of a page. So, this can be easily achieved for the given jQuery by using the required code. So, when the user gets or reaches to the bottom of a page, then the next thing one would be needing to do is call the function called loadArticle which is present in the scroll function.

Now each time the given user would scroll to the bottom of the page, then the counter would increase and it can enable one to have the given page number to simply pass through the wp infinitepage() function which would be present in the themes’s function called theme functions.php.

With the loadArticle and scroll function, one can implement the Ajax function call that is present in the WordPress theme, however, the result would not be there if the loop file is not present in the theme folder.

Frankly, you would be needing to use this function in any of the themes and if you want to find out how the infinite scrolling would be effective, then check out the above given procedures.

Leave a Reply

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