Ajax load more for Users with wordpress

In this tutorial, you will learn about implementing the “Load More users in WordPress” functionality. Another term used is Ajax load more 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 web development, the very first step always starts with the designing part. In our tutorial, we will also start 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, a script is written to call the ajax function when the link (load more users) is clicked. At the click of that link, we are passing the variable offset which contains the value. 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 the 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 a template, feel free to comment or contact us. We will teach you how to make a page with a specific template. If you are ready with the page at the backend, go ahead to the next step.

Step 2:

Now copy the following code into your theme’s functions.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. The next four users will be fetched from DB and passed the data to the ajax callback function from this 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 is bellowed.

After the successful call to the ajax function in the above code, 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 a 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

 150 total views,  4 views today