Ajax load more for Users with wordpress

In this tutorial, you will learn about implementing “Load More users in wordpress” functionality. Another term used is Ajax loadmore users in wordPress. We will use jquery and ajax. If you are not familiar with jquery and ajax, You can learn jquery from here.

As we know that, in the present era, most of the websites show only small amount of data at the loading of website so that loading speed increases and website will open very fast. Same is the case if you want to show the users (subscribers) of your website on any page of your website or at any section. You can show all the users at once or you can use our tutorial to load the 5-6 users at the time of your website load and then can give a button to load more users.

It’s as easy as 1 2 3.  So let’s start our tutorial for “Ajax load more for users”. For this, you have to follow the given bellow steps one by one:

Step 1:

In the web development, the very first step always starts with the designing part. In our tutorial, we will also starts with the UI (design). We will make four <div>s in a row and show four users in those divs. After that there will be a link to load more users.

Make a template in your wordpress theme for example “loadmoreusers.php” and then use the following code in that template.

This code will make a template. Let me explain the code. The very first section is used to make the HTML view for the frontend (i.e UI for the page). After that there is a script written to call the ajax function when the link (load more users) is clicked. On the click of that link, we are passing the variable offset which contains value “4”. This is because we had already shown the previous four users on our page in html. So after ajax, the next four users should be shown.

Now you have to make a new page in wordpress backend (admin dashboard). We are assuming that you very well know how to make a page in wordpress with a chosen template. If you don’t know how to make a page with template, feel free to comment or contact us. We will teach you how to make a page with specific template. If you are ready with the page at backend, go ahead to the next step.

Step 2:

Now copy the following code into your theme’s function.php file. In this function, we have used almost same code as we used in the template as we are going to append the similar view for the next four users. From this function, next four users will be fetched from DB and passed the response to the ajax callback function. Ajax callback function will read the response from the function and then the script will load the response in the given div as code given bellow.

In the above code, after the successful call to ajax function, the view will be appended to the given div. If you don’t know what is the meaning of append and what is the purpose of append, you can read our tutorial for jquery append and prepend function. Along with that, we have used another jquery function hide(). This function is used to hide a particular tag with given class, id or even with the tag name. You can read out all the jquery tutorials from this link.
View Demo

Download Files:

Download entire Theme : load more users theme