Nate Reist WCGR WP AJAX presentation

NATE REIST
AJAX: USING JAVASCRIPT  
IN WORDPRESS
FOLLOW ME ON TWITTER @NATEREIST

NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
WHAT WE’LL BE TALKING ABOUT
• What is AJAX and why should we use it?
• How can we use AJAX in plugins and themes?
• Code examples
• Issues, tips and tricks

SOME ASSUMPTIONS
• You know some PHP
• You know some JavaScript
• You know something about WordPress hooks and ﬁlters
• Even if you don’t I hope this makes you aware of what you can
do with WP_AJAX

INTRODUCTION
WHAT IS AJAX?

WHAT IS AJAX?
AJAX stands for Asynchronous JavaScript and XMLHttpRequests 
To break that down…
• Asynchronous means to not be synchronous, or not happening
at the same time. The data retrieved is not loaded at the time of
page load.
• JavaScript will request data from somewhere ( our WordPress in
this case )
• The data is returned in XML format

HOLD UP!
I don’t want XML, I want JSON! JavaScript Object Notation is
easier, in my opinion, to work with. Sometimes this is called AJAJ
(Asynchronous JavaScript and JSON), but that is one in the same.

WHY USE AJAX?
Pros:
• It is fast: load lighter pages quicker. You can request only what you need.
• It allows for more interactivity.
• Takes the load oﬀ your web server if you can defer some processing to
the client side
!
Cons:
• It is client side, so there are a lot of other areas for things to go wrong.
Every diﬀerent browser comes back into the ring as a contender.
• Another language or library or two to really learn.

COMMON USES OF AJAX
• Contact Forms
• Inﬁnite Scroll
• WP Post edits in the admin
• WP Menu editor

PLUGINS / THEMES
HOW TO USE AJAX

GETTING HOOKED
To get started, you need to have WordPress listening for AJAX calls. This can
be done by adding an action to the wp_ajax_ or wp_ajax_nopriv_ hook. Do
this by adding your action name to the hook as part of the string. 
!
For example:
!
!
!
Your JavaScript can then on that hook. Something like:  
when clicked request AJAX response. 
!
Your function should return a valid response that JavaScript can interpret.

STEPS IN AN AJAX TRANSITION
1. WordPress / PHP renders your page to the browser
2. JavaScript starts running in the user’s web browser
3. JavaScript makes AJAX call back into WordPress application
4. WordPress and PHP runs the appropriate hook and functions returns a
response to the browser
5. JavaScript parses the response properly and updates the DOM

1. WORDPRESS / PHP RENDERS  
YOUR PAGE TO THE BROWSER
The normal load of your page to the browser, theme and plugins loaded,
content gets pulled from the database, scripts get enqueued, AJAX hooks
are populated, page gets built.

2. JAVASCRIPT STARTS RUNNING  
IN THE USER’S WEB BROWSER
This is when all of your JavaScript starts to take hold with event listeners,
etc.

3. JAVASCRIPT MAKES AJAX CALL  
BACK INTO WORDPRESS
On click, AJAX request

4. WORDPRESS RUNS APPROPRIATE  
HOOKS AND FUNCTIONS
…then returns a response to the browser.

5. JAVASCRIPT PARSES THE  
RESPONSE + UPDATES THE DOM

DEMO
Download and code along: https://github.com/natereist/wcgr-ajax-likes/

USING AJAX
ISSUES, TIPS + TRICKS

SOME TIPS
• Use wp_nonces to determine user intent and keep the proper response
returned, as well as a light security layer
• Things you can return
• JSON
• XML
• HTML
• strings
• integers
• Enqueue your scripts properly and localize data to your scripts to keep it
clean
• wp_ajax_ hook is great for protected interactions, where as
wp_ajax_nopriv_ is for anyone to access

POTENTIAL ISSUES
• If you get a 0 it usually means there is an error in how you have hooked
your functions or spelling. You could also be trying to access a private
hook while not logged in, or you didn’t pass some other security check.
• If you get an internal server error, something in your code is wrong.
Usually a parse error.
• JavaScript cannot handle the response, or a JavaScript error is usually bad
formatting of data. Headers already sent can be due to a PHP notice or
warning from PHP.

TRICKS
• You can update WP AJAX callbacks in development and see results
without refreshing your page.
• Use Chrome developer tools and Firebug, etc. to quickly view JSON
responses using the console.log function in development. Don’t put this
into production unless necessary.
• It is not supported by all browsers, but you shouldn’t be logging
debugging data to consumers anyway!
• You can return full HTML, if you were just going to replace a section of the
site with new content and don’t want to parse JSON or XML.
• There is a core class for passing back really clean and good XML data if
you prefer that:  
http://codex.wordpress.org/Class_Reference/WP_Ajax_Response
• wp_send_json is great because it will JSON encode things for you and
then exit the PHP WordPress application.

COOL USES
Some things that you could do to make more interactive WordPress
applications: 
• Auto saving things like meta ﬁelds
• Full JavaScript framework based on applications like Ember, Angular or
Backbone
• Cool web components with things like Polymer or react.js
• Live updating of content, score/stock tickers
• Simple or complex interactive features like chat clients or JavaScript
games

IN CONCLUSION…
WP_AJAX is a great way to extend the functionality of your
WordPress plugins, themes, sites or applications.
With a focus more lately on JavaScript-based web applications and
speed and bandwidth being an issue, it is a great way to begin to
optimize performance and increase interactivity.

CONNECT WITH ME
MY COMPANY mindutopia.com
!
ON WORDPRESS proﬁles.wordpress.org/natereist
!
TWITTER @natereist

Nate Reist WCGR WP AJAX presentation

More Related Content

What's hot (20)

Similar to Nate Reist WCGR WP AJAX presentation (20)

Recently uploaded (20)

Nate Reist WCGR WP AJAX presentation