icanI 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.
- Let’s include jquery:
<?php echo'<script src="'.get_option('siteurl'). '/wp-content/plugins/jquery-1.2.3.min.js"> </script>'; - Now the code for ajax request: there are two things to notice
- the ‘action‘, which contains the value to be used with ‘wp_ajax_‘ to make a WordPress hook.
- 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.
- 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; } - 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.
Thoughts on This Post (30)
That is very cool. I had used a file in the plugin directory that linked back to and included the wp-config file. I will have to try this method when I get a chance.
That is very cool. I had used a file in the plugin directory that linked back to and included the wp-config file. I will have to try this method when I get a chance.
thanx man
Hey, Thanks for the writing this post. This was exactly the problem I was having. After your page I also found some others Wordpress AJAX examples using jquery here: http://ocaoimh.ie/2008/11/01/make-your-wordpress-plugin-talk-ajax/
Hi, Thanks for this article, I’m just looking for how to do this in my plugin, and your article help me a lot. Thankss!
nice, I’ll try and use it in my current project. Thank you.
Woww, Thank you brother . Very good theme .
Great post, I found this very useful for the WP site I am currently in development with.
cool. I was wondering how I could hook into the wordpress, built-in DB functionality… had copped out with some direct DB calls (sloppy). good job digging into the wordpress core and figuring it out – and especially thanks for sharing:) ciao
goood post…wordpress is the best…
Great article, adding it to my bookmarks!
This only works if the user is logged in, otherwise, wordpress returns a -1 and never gets into the function.
thanks for your details
Great post, I was looking for something like this for my new plugin. Thanks
Thanks for the tutorial, it cleared up some of my issues with using ajax in the admin. -Brad
You can use admin-ajax.php for no-admin actions, you just need to change the start of the hook from “wp_ajax_” to “wp_ajax_nopriv_”
Nice article but I am looking to go to a page which has a dropdown box and when the user selects the race from the drop down box the results will be displayed below it. Any help on how to do this would be much appreciated
if you develop a plugin that relies on AJAX, what (if anything) do you do as a failsafe for people who have javascript disabled?
Thanks for the explanation. Every time I search for that I keep coming back and though I forget everytime I directly remember how that Ajax-thingy works with wordpress. Good work. Thanks Stefan
This is a great post, it will really going to help the many wordpress developers…thanks a ton 🙂
Thank you, this is great stuff.
Hello, thanks for the post. I’ve got the demo version. I’m new to WP and ajax… I have some difficulty in understanding what the line add_action(‘edit_form_advanced’, ‘ajaxDemo’) does. Could you explain it a bit more? Thanks:)
Hm… I see that add_action(‘edit_form_advanced’, ‘ajaxDemo’) adds a button at the bottom of the edit screen for any kind of post – WP post or a custom post type. I have a CD post type where I’d like to use ajax to add as much tracks to it as I want. Can I tire up the ajax only to a specific metabox? so it appears only in the CD posts when creating or editing CD info? Would really appreciate any help! Thanks, Dasha
Very nice solution.
Great stuff for plugin development, I’m just wondering using <a href="http://wpleet.com/wordpress-ajax-jquery-practice-using-shortcode/" wordpress and ajax in your post.
Very nice solution.Thanks
Thank you. You explained it very well and the plugin clarified it all. I was looking for a way to dynamically populate an HTML select box from the wpdb. After modification this will work great!
Bookmarked! Thanks for this article. This inspired me to create a useful article on WordPress AJAX. I also included in the article on how to combine WordPress Shortcode and AJAX for easy implementation on your WordPress blog. http://wpleet.com/wordpress-ajax-jquery-practice-using-shortcode/
Thanks for the plugin! I´ve finally found it. Thats what i was looking for. Kind regards!!
Hey, I have more than 1 echo statement in my ajax function. So the alert box is not showing up anything.(function(str){alert(str);}). How can i fix this issue