WordPress provides a set of great tools for processing ajax requests in plugins (and themes). I’m going to give you a quick example of how these tools can be used to accomplish a variety of tasks. For this example, We’ll just be using some simple alerts, but they will serve very well for demonstration purposes.

The first thing we will do is write our jQuery function. This will be used for interpreting a click event on the front end and sending the request to the server. Name your file ajax-test.js and place it in the root of your plugin folder, or wherever you wish.

1
2
3
4
5
6
7
8
9
10
11
12
13

jQuery(document).ready( function($) {
	$(".ajax-link").click( function() {
		var data = {
			action: 'test_response',
                        post_var: 'this will be echoed back'
		};
		// the_ajax_script.ajaxurl is a variable that will contain the url to the ajax processing file
	 	$.post(the_ajax_script.ajaxurl, data, function(response) {
			alert(response);
	 	});
	 	return false;
	});
});

What we have done in this bit of jQuery is pretty simple. First we run our function anytime that an anchor link with a class of “ajax-link” is clicked. Next, we set up a variable containing the POST variables and their values. Take careful note of our variable names: action, which is set to the value of “test_response”, and post_var, which has a value of “this will be echoed back”. We will use both of these var names in a bit.

Next we use the jQuery $.post() function to send the data variable to the server. Notice the the_ajax_script.ajaxurl parameter. This is a variable containing the url of the ajax processing file. We will set this variable in a little bit. Inside of the post function, we have setup an alert to happen when the request is finished, and we’re going to display the value of the response in our alert(). This will allow us to know if it really worked.

That’s it for the jQuery, so now we move on the PHP.

Inside of your plugin file, or theme file, you need to create two functions: one to load the jquery we just wrote, and one to process the request.

This function will load the JS scripts:

1
2
3
4
5
6
7
8

function test_ajax_load_scripts() {
	// load our jquery file that sends the $.post request
	wp_enqueue_script( "ajax-test", plugin_dir_url( __FILE__ ) . '/ajax-test.js', array( 'jquery' ) );
 
	// make the ajaxurl var available to the above script
	wp_localize_script( 'ajax-test', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );	
}
add_action('wp_print_scripts', 'test_ajax_load_scripts');

The first part of this function loads and initiates the jQuery file we just wrote. After that, we use wp_localize_script() to send the ajaxurl variable to our script. The first parameter of this function must match the first of the wp_enqueue_script() function.

After we’ve loaded the script and made the ajax url available for use, we make use of add_action() to load the scripts in our site’s header.

Now, we write our last function, which will receive the request sent by our jQuery script, and then send a response back to it. This is where we must remember the var names we used in our data variable in our jQuery.

1
2
3
4
5
6
7
8
9
10
11

function text_ajax_process_request() {
	// first check if data is being sent and that it is the data we want
  	if ( isset( $_POST["post_var"] ) ) {
		// now set our response var equal to that of the POST var (this will need to be sanitized based on what you're doing with with it)
		$response = $_POST["post_var"];
		// send the response back to the front end
		echo $response;
		die();
	}
}
add_action('wp_ajax_test_response', 'text_ajax_process_request');

This function does little more than check that the correct data is being sent, and then sends the response back. One of the really important things to notice here is the first parameter of the add_action() hook. It has the form of wp_ajax_{action_name} where {action_name} equals the value of the action var we set in our data variable.

Now, if all goes well, you will get a nice alert saying “this will be echoed back” when you click on your link. That’s great because now you can go much farther and beyond this example and utilize this same modal to do some really cool things in your plugins. I recently used this exact technique (and hardly much more code) to write a Mark as Read plugin.