Simplified AJAX For WordPress Plugin Developers using Jquery

I am assuming you know how to write a WordPress plugin, and now you are wondering how to use ajax to add that sexy feature that will make your plugin look a bit kool.

I faced the same problem, with my akWpUploder plugin. I googled but could not find anything interesting, or should I say, simple way of adding ajax to my plugin. So I dig into the WordPress code base for solution, as auto-saving feature of WordPress was one such thing that I wanted to use.

There I found what I was really looking for, a very simple way of using Ajax to get things done.

Problem: How to use WordPress functions in your plugin when using ajax

Let me explain the problem first, while I was working on my plugin I needed to insert the photo data into the database. To do this I needed to use WordPress database functions, but the way I knew to use ajax(i.e. creating a separate PHP file that handles the ajax request), it was bit difficult and messy. It would have involved either making a direct connection with the database or including the WordPress config file.

I was not happy with either of these options, I needed a simpler solution.

Solution: admin-ajax.php and action hook wp_ajax_

As I mentioned earlier I dig into WordPress to see the way WP uses ajax to save the posts.

What I found was this code.

      default :
	do_action( 'wp_ajax_' . $_POST['action'] );
 	die('0');

So, now all I needed to do was send all my ajax requests to admin-ajax.php to provide an ‘action’ and WordPress will call the function attached to that hook.

Neat, isn’t it? Now I can keep my plugin simple.

Implementation: an example

You might be thinking “It’s ok, but can you show me an example?”

Yeah, sure I will.

First we take care of javascript, here I am using Jquery, the easiest javascript library available.

1. Let’s include jquery:

   <?php
   echo'<script src="'.get_option('siteurl'). '/wp-content/plugins/jquery-1.2.3.min.js"> </script>';

2. Now the code for ajax request: there are two things to notice
   1. the ‘action‘, which contains the value to be used with ‘wp_ajax_‘ to make a WordPress hook.
   2. the other is ‘cookie‘ which contains the cookie required to authenticate your admin access to admin-ajax.php.

   <script>
    $.post(siteurl+"/wp-admin/admin-ajax.php", {action:"ak_attach", 'cookie': encodeURIComponent(document.cookie)},
    function(str)
   {
         alert(str);
   });
   
   </script>

With this the javascript part of the things is over.

Now we will take care of handling this request in our plugin.

1. So first we will create the function that will respond to ajax request. you should notice that i have used the exit at the end this is because i want the script to end here, other wise i will get ‘0’ with my data.

   <?php
   function ajaxResponse(){
   global $wpdb; 	global $userdata;
   get_currentuserinfo();
    echo "Hello ". $userdata->user_login;
    exit;
    }

2. Now we need to tell wordpress about this function, so we will attach this function to the Hook that we created, by providing the action parameter in the javascript code above.

    add_action('wp_ajax_ak_attach', 'ajaxResponse');
   add_action( ‘wp_ajax_nopriv_ak_attach’, ‘ajaxResponse’ );//only used for non-loggedin scenario

That’s it we are done.

Now that you know how to use ajax easily while writing the your plugin, go ahead and use it. Download code for this demo plugin which shows the whole operation, and can act as template.

Note: admin-ajax.php only allows admin users to post the data, which means this can only be used on admin area of wordpress and not in the general scenario. For using ajax in other situations please check Using AJAX with your WordPress Plugin tutorial by Ronald.  With the latest version of WordPress, it is possible to use admin-ajax.php for all situations.