Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
SOME ASSUMPTIONS
• You know some PHP
• You know some JavaScript
• You know ...
INTRODUCTION
WHAT IS AJAX?
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
Stronger than dirt!
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
WHAT IS AJAX?
AJAX stands for Asynchronous JavaScript and XMLHttpRequests

...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
HOLD UP!
I don’t want XML, I want JSON! JavaScript Object Notation is
easie...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
WHY USE AJAX?
Pros:
• It is fast: load lighter pages quicker. You can reque...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
COMMON USES OF AJAX
• Contact Forms
• Infinite Scroll
• WP Post edits in the...
PLUGINS / THEMES
HOW TO USE AJAX
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
GETTING HOOKED
To get started, you need to have WordPress listening for AJA...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
STEPS IN AN AJAX TRANSITION
1. WordPress / PHP renders your page to the bro...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
1. WORDPRESS / PHP RENDERS 

YOUR PAGE TO THE BROWSER
The normal load of yo...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
2. JAVASCRIPT STARTS RUNNING 

IN THE USER’S WEB BROWSER
This is when all o...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
3. JAVASCRIPT MAKES AJAX CALL 

BACK INTO WORDPRESS
On click, AJAX request
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
4. WORDPRESS RUNS APPROPRIATE 

HOOKS AND FUNCTIONS
…then returns a respons...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
5. JAVASCRIPT PARSES THE 

RESPONSE + UPDATES THE DOM
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
DEMO
Download and code along: https://github.com/natereist/wcgr-ajax-likes/
USING AJAX
ISSUES, TIPS + TRICKS
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
SOME TIPS
• Use wp_nonces to determine user intent and keep the proper resp...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
POTENTIAL ISSUES
• If you get a 0 it usually means there is an error in how...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
TRICKS
• You can update WP AJAX callbacks in development and see results
wi...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
COOL USES
Some things that you could do to make more interactive WordPress
...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
IN CONCLUSION…
WP_AJAX is a great way to extend the functionality of your
W...
NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
CONNECT WITH ME
MY COMPANY mindutopia.com
!
ON WORDPRESS profiles.wordpress....
Upcoming SlideShare
Loading in …5
×

Nate Reist WCGR WP AJAX presentation

1,203 views

Published on

WordCamp Grand Rapids Presentation on WP and AJAX

Published in: Software
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Nate Reist WCGR WP AJAX presentation

  1. 1. NATE REIST AJAX: USING JAVASCRIPT 
 IN WORDPRESS FOLLOW ME ON TWITTER @NATEREIST
  2. 2. 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
  3. 3. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS SOME ASSUMPTIONS • You know some PHP • You know some JavaScript • You know something about WordPress hooks and filters • Even if you don’t I hope this makes you aware of what you can do with WP_AJAX
  4. 4. INTRODUCTION WHAT IS AJAX? NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
  5. 5. Stronger than dirt!
  6. 6. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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
  7. 7. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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.
  8. 8. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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 off 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 different browser comes back into the ring as a contender. • Another language or library or two to really learn.
  9. 9. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS COMMON USES OF AJAX • Contact Forms • Infinite Scroll • WP Post edits in the admin • WP Menu editor
  10. 10. PLUGINS / THEMES HOW TO USE AJAX NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
  11. 11. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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.
  12. 12. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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
  13. 13. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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.
  14. 14. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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.
  15. 15. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 3. JAVASCRIPT MAKES AJAX CALL 
 BACK INTO WORDPRESS On click, AJAX request
  16. 16. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 4. WORDPRESS RUNS APPROPRIATE 
 HOOKS AND FUNCTIONS …then returns a response to the browser.
  17. 17. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 5. JAVASCRIPT PARSES THE 
 RESPONSE + UPDATES THE DOM
  18. 18. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS DEMO Download and code along: https://github.com/natereist/wcgr-ajax-likes/
  19. 19. USING AJAX ISSUES, TIPS + TRICKS NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS
  20. 20. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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
  21. 21. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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.
  22. 22. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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.
  23. 23. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS COOL USES Some things that you could do to make more interactive WordPress applications:
 • Auto saving things like meta fields • 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
  24. 24. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS 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.
  25. 25. NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS CONNECT WITH ME MY COMPANY mindutopia.com ! ON WORDPRESS profiles.wordpress.org/natereist ! TWITTER @natereist

×