Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are a couple of steps to making AJAX work on the front-end of WordPress databases. The first step is we need to write a function. This function is going to be registered with the AJAX handler. So what this function should do is it should essentially get some post data, and then it should output something that can be used by the JQuery request. So we're going to write a function tpp_ posts_comments_return, and in here, we're going to set the variable post_id.
This is going to store the ID. First, we're going to look to see if the post has a value called post_id. So if this is set, then we can go ahead and set it equal to that value. Make sure to wrap that in quotation. If it's not set, then we'll set it to zero. Since our ID starts at one, we'll know if it's set to zero, that it's not a valid post_id. So then we can say if $post_id is greater than zero, then let's go ahead and get the post and return some information.
So I'm going to create a variable called post and set it equal to the result of calling this get_post function. The get_post function takes a post_id and will return in the post data for the ID that matches. I then want to write out some HTML, and it's going to be pretty straightforward. I'm going to give it an ID of post, a div tag, and then I'm just going to output the actual content of that post. The way I do that is I just echo, and then I use my post variable, and I output a property inside of it called post_content.
If you look up the get_post function in the Codex, you'll find the definition for all of this. So let's go ahead and open our PHP up again and make sure, after this if statement, to call the die method. This is going to stop processing of the PHP and make sure that the only thing that gets returned when they call this action is our HTML. So once that function is set up, you then need to register it with the AJAX engine. So we use an action for that. The name of the action is wp_ajax_nopriv, which stands for no privileges, which allows you to access the same AJAX script that we accessed from the back end, only it opens it up, so that things on the front end of the web site can access it as well.
So we're going to go ahead and say the class for this is div is tpp_posts. We're going to set an ID for our href, and we're going to set it equal to echo the_id. It's a template tag that's for outputting the ID of the current post. We're also going to assign a class for this a. We're going to call it comment_link. So those are all defined.
So what I want to do first is I'm going to set a mouseover event for every div in the class of tpp_posts. So I specify div.tpp_posts. That will get those. Then we can set mouseover, and then this function will execute, and that occurs. So the first thing I'm going to do is I'm going to create a variable called div, and just set it equal to the div who's firing the mouseover event.
Action is going to be tpp_comments. So what I'm doing now is I'm setting up variables that I want to pass in my AJAX request. The action is going to match whatever I registered after the nopriv. Then I'm going to pass the post_id. I'm going to get this from current div, and I'm going to look inside of this current object for every a object, which there will be one in each one, and I'm going to grab the id attribute.
If you remember, in that a, I set the ID equal to the ID of the post, so that's going to return my post_id. So that's the end of my post object, the data that I want to pass. Now I need to specify what I want to happen when the result comes back. So I'm going to create a function that takes an argument data, which will be the result data, and what I'm going to do is say div, which is my div tag, .append, and then I'm just going to append my data.
So I can now close that entirely. Now I've created my post. I want to make sure to return false for that function, and then I'm going to close this entire section. I'm going to add one other event for div.tpp_posts, those same div tags. I'm going to add a mouseout event.
What this is going to do is this is essentially just going to erase the data once it's been displayed. So we can just say #post, so that's going to refer to everything with the post_id, and if you look at what gets returned, they all have an ID of post. So whichever has id of post, I'm going to go ahead and remove it. Again, there are always multiple ways to do these sorts of things. I'm just trying to give you a simple idea of how to do this. So let's go ahead and save it. Take a quick glance to make sure that everything is there.
I noticed seeing it that I didn't put my ID in the attribute, but everything else-- oh, this should also be a Dollar sign. I think everything else looks pretty good. So let's go ahead and go back into our client page. Let's now set up our scripts. So if you remember from the AJAX on the administrative side, you need to create a function that's going to call the wp_enqueue_script method. This essentially embeds scripts into our file.
So we'll say tpp_posts_get_scripts, which is the function we just wrote. So that will just make sure that our script gets loaded up every time our page loads on the front end. So now let's go ahead and refresh this page. When I mouse over one of these, I should now see the post underneath it, but it doesn't seem to appear. If I look down in my firebug, I can see that it has gone out and made a request, and it looks like everything is set up appropriately, only it's getting a zero back.
This might be because I'm currently also logged in as admin, and it's trying to do some kind of no privilege. So let's go ahead and log out, so that we look more like an anonymous user. Now let's try mousing over again. You can see it does appear. So when I mouse over, I get the post, and when I mouse out, it goes away, and same with this one. So as you can see, AJAX and JQuery work together to make a really fast and interactive site, and you can use it with the loop data--or with any data really inside of WordPress environment.
All you need to do is set up a function that's going to return some data, and you're going to use that admin AJAX PHP, just like we did in the admin. Make sure to register that function then as an action, and then go ahead and write your JQuery and register that script using the wp_enqueue scripts. All in all, AJAX and JQuery can make for a really interactive WordPress web site.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101804 Viewers
61 Video lessons · 88555 Viewers
71 Video lessons · 72373 Viewers
56 Video lessons · 104074 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.