Using AJAX in your plugins and themes

This article, aimed at plugin developers, describes how to add Ajax to a plugin. Before reading this article, you should be familiar with the following: Ajax - Overview of the technology Writing a Plugin - How to write a plugin Plugin API - Filters and actions - what they are and how to use them How to add HTML to the appropriate WordPress page, post, or screen -- for instance, if you want to add Ajax to administration screens you create, you will need to understand how to add administration menus to WordPress; if you want to add Ajax to the display of a single post, you'll need to figure out the right filters and actions to add HTML to that spot on viewer-facing blog screens.

G E T T H E S L I D E S

H T T P : / / W W W I T S A N A N D E R S O N C O M / W C S E A P D F

Using Ajax in Your Plugins and

Themes

About Me

Ajax – “What Does it Mean?”

Synchronous Requests Asynchronous Requests

“Asynchronous JavaScript and XML”

Simplify With jQuery

jQuery Basics – No Conflict

jQuery Basics – Ajax Response Types

evaluation

the page

Ajax in WordPress – Queue Your Script

 Use wp_enqueue_script() to add your script to a page

 handle – Name of script, e.g “my-awesome-script”

 src – Where your script can be found

 Use get_template_directory_uri() in parent themes

 Use get_stylesheet_directory_uri() in child themes

 Use plugins_url( „script.js‟, FILE ) in plugins

 deps – An array of scripts that this script relies on, by handle If you need jQuery, use something like “array( „jquery‟ )” Go to wp_enqueue_script Codex page for a list of

available dependencies

 ver – The version of the script Useful for “cachebusting” when your plugin is updated

 in_footer – Whether to place the script in the footer (rather than the header) Defaults to false

Ajax in WordPress – Queue Your Script (cont‟d)

Examples

Ajax in WordPress – Queue Your Script (cont‟d)

intelligently

conditional tags

Ajax in WordPress – Making Requests

 Admin Ajax

 Use „ajaxurl‟ variable

 Frontend Ajax

 Use „wp_localize_script‟ function

 Use „init‟ hook

Ajax in WordPress – Making Requests

Admin Ajax

Make sure you check user permissions Any logged in user can make ajax requests

Ajax in WordPress – Making Requests

Frontend Ajax – wp_localize_script

Ajax in WordPress – Making Requests

Frontend Ajax – init

Ajax in WordPress – Another Response Type

Another Response Type – json

Simplify Your Ajax Handlers

Simplify Your Ajax Handlers

Simplify Your Ajax Handlers

Example Plugin

Simple Post Ratings

Questions?

Will Anderson

http://www.itsananderson.com/

@itsananderson will@itsananderson.com