Make your WordPress plugin talk AJAX

Posted on November 1, 2008 by Donncha O Caoimh

This morning at BarCamp Cork I gave a short talk on how to add AJAX functionality to WordPress plugins.

Here are the example scripts I used during the talk. Rename the files to .php and install as you would normal WordPress plugins.

helloworld1.txt – very simple and basic “Hello World” plugin.
helloworld2.txt – script that will display the text “Hello World” using an AJAX request to get the text from the server.
helloworld3.txt – script that displays “Hello World” text, and an “update” link that increments a counter via an AJAX http request.
helloworld4.txt – script that displays a simple form. The form has one text box, a “Random” button and a “Save” button. Clicking the “Random” button makes a request to the server to get a random number. “Save” sends the number to the server.
helloworld5.txt and rate.txt – “Rating” script to rate a post (Originally from here). Makes an AJAX request to the server with the rating. Server returns randomly generated stats on rating. Place rate.php in wp-content/

All scripts that operate in the Settings page in the Dashboard use a nonce for security and access admin-ajax.php when making AJAX requests. The wp_ajax_$POST[ 'action' ] hook is used to execute the actual code that does something useful.

The rating script uses wp_enqueue_script() to load the jQuery class.

If you’re an Irish O2 user, and use Twitter you might like to install the new Tweet Tweet WordPress plugin. Thanks to Enda who let me use his O2 account briefly, I created a plugin that sends Twitter sms notifications using the free O2.ie web texts. That means Meteor, Vodafone and O2 are now covered. Anyone want to contribute a plugin for 3?

PS. I was very proud that Automattic was able to sponsor BarCamp Cork, and hopefully most of the WordPress badges found good homes! Conor says 116 signed up for the event, with just over 100 showing up. That’s a great number to pull in for a Saturday tech event!

More photos can be found on pix.ie and flickr. Looks like Phil hasn’t uploaded any of his shots yet! Can’t wait to see what came of his afternoon photo session. I had to leave early and missed it unfortunately.
Discovered photos of my presentation. Yes, I used Vi (or Vim if you want to be pedantic) to give my talk!

37 thoughts on “Make your WordPress plugin talk AJAX”

Viper007Bond (28 comments.) on November 2, 2008 at 8:24 am said:

I really should use AJAX more often. It’s so easy with jQuery and WordPress. Thanks for the reminder!

Reply ↓
Ozh (4 comments.) on November 2, 2008 at 10:55 am said:

Thanks for this Donncha. Very well put and simple examples to follow.

Reply ↓
Ryan (1 comments.) on November 2, 2008 at 11:08 am said:

Thanks

I’ve been needing to learn a bit of AJAX for a while now so hopefully these will help break me out of the noob bracket.

Reply ↓
Marcel (1 comments.) on November 2, 2008 at 11:43 am said:

Thank you Donncha,
I wanted to make my plugin Lazyest Gallery talk AJAX but I needed some simple exampes to start with.

Reply ↓
Donncha (1707 comments.) on November 2, 2008 at 1:06 pm said:

Glad they’re a help. My Tweet Tweet plugin uses jQuery too and I found it was hard finding info on how to make AJAX requests while in the dashboard. The nonce stuff required a bit of digging into WordPress code too, but it’s fairly straight forward once you’ve done it once.

Reply ↓
TheChrisD (70 comments.) on November 2, 2008 at 2:13 pm said:

So is there anything else new in the latest version of Tweet Tweet? Or can I safely ignore the little “2″ next to my Plugins tab?

Reply ↓
thecancerus (1 comments.) on November 2, 2008 at 4:01 pm said:

I had written something similar in April, without using nounce would love to have your feedback on that Simplified AJAX For WordPress Plugin Developers Using Jquery

Reply ↓
Donncha (1707 comments.) on November 2, 2008 at 8:53 pm said:

Chris – O2 support is the main thing, but the AJAX transition effects when the plugin updates are changed a bit and a settings link is added too.

Reply ↓
Donncha (1707 comments.) on November 2, 2008 at 9:02 pm said:

thecancerus – excellent tutorial. Maybe update it with a section on using a nonce? The security implications of using AJAX without a nonce are severe. A hacker can craft a url and if they trick you into clicking on it they can do bad things to your blog!

Reply ↓
Ryck (Ricardo GonzÃ¡lez) (1 comments.) on November 2, 2008 at 10:28 pm said:

Gran artÃculo sobre como integrar AJAX en tus plugins para el wordpress: http://tinyurl.com/6pl6kf

Reply ↓
Richard (1 comments.) on November 3, 2008 at 6:26 am said:

I wish I have time to practice on Ajax on WordPress. It’s cool.

Reply ↓
nitemayr (Kevin Wardrop) (1 comments.) on November 3, 2008 at 1:36 pm said:

Interesting: http://tinyurl.com/6pl6kf

Reply ↓
James (1 comments.) on November 3, 2008 at 10:02 pm said:

Awesome! Thanks for the notes.
Been looking for some simple ones like these.
=-)

Reply ↓
CaptSolo (Uldis Bojars) (1 comments.) on November 3, 2008 at 9:04 pm said:

cool – @donncha used VIM for his BarCamp Cork presentation “Make your WordPress plugin talk AJAX” – http://tinyurl.com/6pl6kf

Reply ↓
waseem (1 comments.) on November 4, 2008 at 10:59 pm said:

are its working with IE6 ? i think that IE6 have a lot of problems with IE6 .

Reply ↓
YourGoToGuy (David Burch) (1 comments.) on November 5, 2008 at 4:38 am said:

Reading: “Make your WordPress plugin talk AJAX” ( http://tinyurl.com/6pl6kf )

Reply ↓
Eric on December 7, 2008 at 8:18 pm said:

Thanks for the tutorial. This is the first one that has made sense to me.

I have a question regarding the calling of functions within functions…

For the sake of this example, I am trying to call one of my custom functions from inside the get_randomcol() function. But when I do so, I get the error that my custom function has not been defined. I know it’s defined as I reference it elsewhere and even on the same page as your script runs.

So is it possible to call non-WP functions from within get_randomcol() and how?

Thanks,
Eric

Reply ↓
Donncha (1707 comments.) on December 8, 2008 at 10:23 am said:

Eric – sure it’s possible, but the file containing the function has to be included first, obviously. Check our code again and don’t give up!

Reply ↓
Eric on December 8, 2008 at 2:28 pm said:

Thanks. I got it figured out. My functions file wasn’t being included because of the way I had included it in my plugin. I’ve fixed that and now it works great.

Reply ↓
madhav on December 14, 2008 at 12:20 am said:

Thanx dude its really very helpful.

Reply ↓
john@johnsjottings.com (1 comments.) on January 17, 2009 at 12:33 pm said:

Does anyone know of any examples for 2.7 for a plugin that works like the Quick Edit or Reply options in the edit comment section of the admin panel? I’m looking to add my own option to that screen that allows an inline form to pop up similar to those.

Thanks

Reply ↓
Pingback: BrÃ¨ve Wordpress: 40 liens, thÃ¨mes, plugins et astuces en tout genre !
Pingback: HOWTO: Make WordPress plugins work with WP Super Cache
lorelleonwp (Lorelle on WordPress) (1 comments.) on March 15, 2009 at 3:15 pm said:

WP Tips: Make your WordPress plugin talk AJAX http://tinyurl.com/6pl6kf

Reply ↓
shermanhu (Sherman Hu) (1 comments.) on March 16, 2009 at 5:06 pm said:

WP Tips: Make your WordPress plugin talk AJAX http://tinyurl.com/6pl6kf (via @lorelleonwp)

Reply ↓
Pingback: Writing Secure WordPress Plugins talk at Stereonaut!
Pingback: A Novice Guide to WordPress Plugin Development | Pro Blog Design
Bryan (1 comments.) on March 16, 2010 at 11:09 pm said:

Hi Donncha,

I just tested your samples and works great! I was wondering if you can give an example where it gets data from the database? Is that possible?

Will really appreciate if you can help me on this.

Reply ↓
JÃ¼rgen (1 comments.) on April 12, 2010 at 5:35 pm said:

You are MY HERO
This is what I was searching for.
Some simple excamples for simple plugins to build.
Thank you
JÃ¼rgen

Reply ↓
kathy on July 2, 2010 at 9:36 pm said:

thank you for sharing all these cool examples. when developing a plugin w/ ajax, do you have any sort of backup for people who have javascript disabled? cheers!

Reply ↓
Pingback: Some idea about where to settle the plugin interface
Pingback: Toyhouse.cc | Blog | [Week 9] Useful Resources for Making WordPress Plugins
Bob (1 comments.) on December 18, 2010 at 3:46 pm said:

Thanks Dude! I was struggling to wrap my head around the hooks. Now my pages whip you with ajax noodles!

Reply ↓
Seth Carstens (1 comments.) on January 29, 2011 at 4:46 am said:

Awesome! Thank you so much. This helped me learn how to use AJAX in our Classifeds project to create “chained fields” allowing you to choose a parent category, then AJAX created a new dropdown to allow “child categories” to then be chosen. Many Many thanks.

Reply ↓
Pingback: Frontend ( forward facing ) Ajax in Wordpress « Byronyasgur's Blog
jerome on July 12, 2011 at 10:51 am said:

hi – seems like your .txt files are gone; is that for good? i would love to read what you wrote as it seems by reading the comments quite some clear explanations on wp + ajax
thanks for your help

Reply ↓
- Donncha (58 comments.) on July 12, 2011 at 11:32 am said:
  
  Sorry Jerome, I fixed the links now. One of the downsides of moving sites around. A small rewrite rules fixed that.
  
  Reply ↓