In part 5 of this tutorial series we wrote the Javascript that is responsible for firing off the ajax events when a user is followed or unfollowed. Now, in this part, we are going to write the PHP side of the ajax events that takes care of processing the requests and sending a response back to our Javascript.
There are just two events that we need to process:
1. The follow action
2. The unfollow action
Each of these actions will be written as a separate function inside of the file called actions.php in the includes/ directory.
In order to process our ajax requests, we will be using the WordPress AJAX API. This API can be difficult to use the first time, as it can take some time to wrap your mind around how it works, but once you understand it, the API is exceptionally simple to use.
You may recall that in the previous part we setup a JS variable called “ajaxurl” that points to the core WordPress admin-ajax.php file. Sending our AJAX requests to this file is what makes the functions we will write below so nice and simple.
Let’s start by writing the function to process a new follow, which happens when a logged-in user clicks on the link to follow another user.
First we write a simple function and connect it to an action using add_action():
1 2 3 4 | function pwuf_process_new_follow() { } add_action('wp_ajax_follow', 'pwuf_process_new_follow'); |
Inside of this function we will look for the POST data sent by our Javascript we wrote in part 5 and then we will process it accordingly.
To ensure that we only process events that are valid, we will run a quick check to ensure both the user_id key and the follow_id key are present in our POST data:
1 2 3 4 5 6 | function pwuf_process_new_follow() { if ( isset( $_POST['user_id'] ) && isset( $_POST['follow_id'] ) ) { } } add_action('wp_ajax_follow', 'pwuf_process_new_follow'); |
Now, inside of this conditional check, we can use our pwuf_follow_user() function to mark the user as followed:
1 2 3 4 5 6 7 8 9 10 11 | function pwuf_process_new_follow() { if ( isset( $_POST['user_id'] ) && isset( $_POST['follow_id'] ) ) { if( pwuf_follow_user( absint( $_POST['user_id'] ), absint( $_POST['follow_id'] ) ) ) { echo 'success'; } else { echo 'failed'; } } die(); } add_action('wp_ajax_follow', 'pwuf_process_new_follow'); |
The pwuf_follow_user() function returns a boolean value, so we nest it inside of another IF statement so that we can evaluate whether the follow action was successful. If it was successful, we output the word success, which is read by the Javascript we wrote in part 5. If it did not succeed, we output failed.
At the end of the function we use the die() function to stop all execution. That’s it! Processing new followers via AJAX is complete! We can now do nearly the exact same thing for the unfollow action:
1 2 3 4 5 6 7 8 9 10 11 | function pwuf_process_unfollow() { if ( isset( $_POST['user_id'] ) && isset( $_POST['follow_id'] ) ) { if( pwuf_unfollow_user( absint( $_POST['user_id'] ), absint( $_POST['follow_id'] ) ) ) { echo 'success'; } else { echo 'failed'; } } die(); } add_action('wp_ajax_unfollow', 'pwuf_process_unfollow'); |
That’s it for processing, so all we need to do is combine it all together and add a little PHP documentation. our final actions.php file looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <?php /** * Ajax Actions * * @package User Following System * @subpackage Ajax Actions * @copyright Copyright (c) 2012, Pippin Williamson * @license http://opensource.org/licenses/gpl-2.0.php GNU Public License * @since 1.0 */ /** * Processes the ajax request to follow a user * * @access private * @since 1.0 * @return void */ function pwuf_process_new_follow() { if ( isset( $_POST['user_id'] ) && isset( $_POST['follow_id'] ) ) { if( pwuf_follow_user( absint( $_POST['user_id'] ), absint( $_POST['follow_id'] ) ) ) { echo 'success'; } else { echo 'failed'; } } die(); } add_action('wp_ajax_follow', 'pwuf_process_new_follow'); /** * Processes the ajax request to unfollow a user * * @access private * @since 1.0 * @return void */ function pwuf_process_unfollow() { if ( isset( $_POST['user_id'] ) && isset( $_POST['follow_id'] ) ) { if( pwuf_unfollow_user( absint( $_POST['user_id'] ), absint( $_POST['follow_id'] ) ) ) { echo 'success'; } else { echo 'failed'; } } die(); } add_action('wp_ajax_unfollow', 'pwuf_process_unfollow'); |
In part 7, the final section to this tutorial series, will walk through creating two short codes: one for displaying follow / unfollow links, and one for displaying a list of recent posts from users you (the logged-in user) are following.
Hi
Great series. I do have a couple of questions though.
1) In the article you say “You may recall that in the previous part we setup a JS variable called “ajaxurl” that points to the core WordPress admin-ajax.php file”.
If that is the case why would the $_POST[‘user_id’] and $_POST[‘follow_id’] get posted to the Actions.php script?
2) What does “wp_ajax_follow” refer to. To my understanding the first part of an add_action call should be the “point” when you wish the function to be called. In this case it looks like you have generated your own custom point where you can plug into a plug-in (so to speak). But I can’t find the “wp_ajax_follow” do_action call. I may have missed it though.
Regards
Robert Austin
1). The actions.php file simply holds this functions, but the actual processing happens in the WordPress core file called “admin-ajax.php”, which is what ajaxurl points to.
2). In order to completely understand this, you will need to understand how processing ajax requests in WordPress works. Take a look at this tutorial I did to see if it clears everything up for you: https://pippinsplugins.com/process-ajax-requests-correctly-in-wordpress-plugins/
Hi
Thank you for the response. That does help.
Regards
Robert Austin
Hi Pippin,
Should you be verifying the nonce in the pwuf_process_new_follow and pwuf_process_unfollow functions?
Thanks,
Jacob
In general nonces on the frontend are a bad idea. here’s a (very) brief post that gives a couple of examples why: http://kovshenin.com/2012/nonces-on-the-front-end-is-a-bad-idea/