WordPress + Ajax                                 recipes for the road                           WordCamp Reno Tahoe 2012Sa...
Dylan Kuhn            Freelance WordPress Hacker            http://www.cyberhobo.net            @dylankuhn on TwitterSatur...
Perspective           Empower small organizations with WordPress           Usually the sole coder           Years of exper...
Ajax isn’t AjaxSaturday, June 30, 2012
A synchronous    missing server push? threads?         J avaScript      or jQuery. or...                          d3js? Co...
So what is it?         It’s about what the web is made of.         HTML: Documents         +Javascript: Self-Contained App...
Insert Complicated Browser-Server Diagram Here                                                Or Say         With Ajax we ...
Unfortunately                          apps are harder to write                               Fortunately   WordPress give...
JavaScript libraries        jQuery, Scriptalicious, Prototype        Client script handling         wp_register_script(), ...
Recipe: Ajax Hello Dolly         Ingredients:         Fresh WordPress install         Hello Dolly plugin         Instant T...
Prep                          Install WordPress                          Activate the Hello Dolly PluginSaturday, June 30,...
Instant Child Theme            $ cd wp-content/themes   # in the themes folder            $ mkdir recipes-child    # make ...
Instant Child Theme          Create a theme file style.css:          /*          Theme Name: Ajax Recipes Child          D...
themes                          !"" index.php                          !"" recipes-child                          #   $"" ...
Back End Script                          Create a theme file hello-admin.js:                          jQuery( function( $ )...
themes                          !"" index.php                          !"" recipes-child                          #   !"" ...
Simple Theme Namespace          Create a theme file functions.php:          <?php          // Pattern: static class as PHP ...
Enqueue Back End Script          Register a method to call when admin scripts can be queued          class AjaxRecipesThem...
Enqueue Back End Script       Implement a method to include our hello-admin.js script       class AjaxRecipesTheme {      ...
Register a method to handle Ajax Dolly requests                          class AjaxRecipesTheme {                         ...
Add the method to handle Ajax Dolly requests       class AjaxRecipesTheme {       ...         static function action_wp_aj...
Ready to Serve!                          themes                          !"" index.php                          !"" recipe...
And the back end looks...                     exactly the same as before                          but! and this is my but:...
What is it doing in there?Saturday, June 30, 2012
Nice!                   But will Dolly be listening?                        In the back end?                        To tha...
Recipe: Hello Dolly, World!                   Ingredients:                   Ajax Hello Dolly                   A new page...
Prep                 Create a new page titled “Are You Dolly?”                          (we’ll assume it gets the default ...
Mark It Up      create theme file page-are-you-dolly.php:     <?php get_header(); ?>     <div id="primary">        <div id...
Inline JavaScript          For now we’ll add a script to page-are-you-dolly.php:        <script>        jQuery( function( ...
Gimme jQuery       On the front end, we have to ask for it       As of WordPress 3.3, we can do this in page-are-you-dolly...
Let the Front End In                          A different ajax action fires for non-logged-in users                       ...
Sing itSaturday, June 30, 2012
Refinement: Spider Garnish                   Ingredients:                   1 spider                   template tweaksSatu...
Spider                          (a.k.a. web spinner)Saturday, June 30, 2012
Drop your spider in the theme                          themes                          !"" index.php                      ...
Load the spider      in page-are-you-dolly.php:     <button id="ajax-recipe-impersonate-dolly">Im Dolly</button>     <p id...
Show and hide the spider      in page-are-you-dolly.php:     var $message = $( #ajax-recipe-dolly-message ),       $spinne...
Onto Our TuffetSaturday, June 30, 2012
Recipe: Spider Ghoulash                   Ingredients:                   many spidersSaturday, June 30, 2012
Saturday, June 30, 2012
Spider GhoulashSaturday, June 30, 2012
A Cry for Reason         David DeSandro / Metafizzy         creator of the ultra-cool isotope library         pleads:     ...
Saturday, June 30, 2012
Programmer? Maybe ask the users.                  Users? Maybe show them the ghoulash.                  Everyone? Maybe AJ...
Refinement: Script File                   Ingredients:                   a separate script file                   enqueuei...
Cut the Inline Script          Create a new theme file hello.js          Copy the <script> contents in page-are-you-dolly....
themes                          !"" index.php                          !"" recipes-child                          #   !"" ...
We’ll expand this call in page-are-you-dolly.php:       <?php wp_enqueue_script( jquery ); ?>       to load both jQuery an...
Unmix It       We need to get rid of the PHP code in hello.js:       url: <?php echo admin_url( admin-ajax.php ); ?>,     ...
Localize? Sort of.        wp_localize_script() will create our variable for us.        Back in page-are-you-dolly.php:    ...
That’s It!                                           Go forth and Ajax                          http://2012.reno.wordcamp....
Upcoming SlideShare
Loading in...5
×

WordPress Ajax Recipes

4,894

Published on

Follow ground-up recipes for building connected Ajax interfaces using WordPress.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,894
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "WordPress Ajax Recipes"

  1. 1. WordPress + Ajax recipes for the road WordCamp Reno Tahoe 2012Saturday, June 30, 2012
  2. 2. Dylan Kuhn Freelance WordPress Hacker http://www.cyberhobo.net @dylankuhn on TwitterSaturday, June 30, 2012
  3. 3. Perspective Empower small organizations with WordPress Usually the sole coder Years of experience - coding in a camperSaturday, June 30, 2012
  4. 4. Ajax isn’t AjaxSaturday, June 30, 2012
  5. 5. A synchronous missing server push? threads? J avaScript or jQuery. or... d3js? CoffeeScript? A nd wat? X ML Mm. Text works. Mucho JSON. It’s your data, but must be HTTP friendly.Saturday, June 30, 2012
  6. 6. So what is it? It’s about what the web is made of. HTML: Documents +Javascript: Self-Contained Apps +Ajax: Connected AppsSaturday, June 30, 2012
  7. 7. Insert Complicated Browser-Server Diagram Here Or Say With Ajax we can request more data after the page loads so you can make it infinitely more delicious :)Saturday, June 30, 2012
  8. 8. Unfortunately apps are harder to write Fortunately WordPress gives us toolsSaturday, June 30, 2012
  9. 9. JavaScript libraries jQuery, Scriptalicious, Prototype Client script handling wp_register_script(), wp_enqueue_script() Server request handling hooks wp_ajax_$action, wp_ajax_nopriv_$action XML generation class WP_Ajax_ResponseSaturday, June 30, 2012
  10. 10. Recipe: Ajax Hello Dolly Ingredients: Fresh WordPress install Hello Dolly plugin Instant TwentyEleven child theme A back end jQuery script A few theme (or plugin) functionsSaturday, June 30, 2012
  11. 11. Prep Install WordPress Activate the Hello Dolly PluginSaturday, June 30, 2012
  12. 12. Instant Child Theme $ cd wp-content/themes # in the themes folder $ mkdir recipes-child # make a new folder $ cd recipes-child # where we’ll add filesSaturday, June 30, 2012
  13. 13. Instant Child Theme Create a theme file style.css: /* Theme Name: Ajax Recipes Child Description: Twenty Eleven child for Ajax recipes Author: Dylan Kuhn Template: twentyeleven */ @import url("../twentyeleven/style.css"); Activate your new theme :)Saturday, June 30, 2012
  14. 14. themes !"" index.php !"" recipes-child #   $"" style.css !"" twentyeleven ... $"" twentytenSaturday, June 30, 2012
  15. 15. Back End Script Create a theme file hello-admin.js: jQuery( function( $ ) { var $dolly = $( #dolly ); $dolly.click( function() { $dolly.html( loading... ); $.ajax( { url: ajaxurl, data: { action: hello_dolly }, dataType: text, success: function( lyric ) { $dolly.html( lyric ); } } ); } ); } );Saturday, June 30, 2012
  16. 16. themes !"" index.php !"" recipes-child #   !"" hello-admin.js #   $"" style.css !"" twentyeleven ... $"" twentytenSaturday, June 30, 2012
  17. 17. Simple Theme Namespace Create a theme file functions.php: <?php // Pattern: static class as PHP 5.2 namespace AjaxRecipesTheme::load(); class AjaxRecipesTheme { static function load() { // Well call add_action and add_filter here } // More static methods will go here }Saturday, June 30, 2012
  18. 18. Enqueue Back End Script Register a method to call when admin scripts can be queued class AjaxRecipesTheme { static function load() { add_action( admin_enqueue_scripts, array( __CLASS__, action_admin_enqueue_scripts ) ); } ... }Saturday, June 30, 2012
  19. 19. Enqueue Back End Script Implement a method to include our hello-admin.js script class AjaxRecipesTheme { ... static function action_admin_enqueue_scripts() { wp_enqueue_script( ajax-recipes-hello-admin, get_stylesheet_directory_uri() . /hello-admin.js, array( jquery ), false, true ); } ... }Saturday, June 30, 2012
  20. 20. Register a method to handle Ajax Dolly requests class AjaxRecipesTheme { static function load() { ... add_action( wp_ajax_hello_dolly, array( __CLASS__, action_wp_ajax_hello_dolly ) ); } ... }Saturday, June 30, 2012
  21. 21. Add the method to handle Ajax Dolly requests class AjaxRecipesTheme { ... static function action_wp_ajax_hello_dolly() { exit( hello_dolly_get_lyric() ); } ... }Saturday, June 30, 2012
  22. 22. Ready to Serve! themes !"" index.php !"" recipes-child #   !"" hello-admin.js #   !"" functions.php #   $"" style.css !"" twentyeleven ... $"" twentytenSaturday, June 30, 2012
  23. 23. And the back end looks... exactly the same as before but! and this is my but:Saturday, June 30, 2012
  24. 24. What is it doing in there?Saturday, June 30, 2012
  25. 25. Nice! But will Dolly be listening? In the back end? To that tiny but?Saturday, June 30, 2012
  26. 26. Recipe: Hello Dolly, World! Ingredients: Ajax Hello Dolly A new page and template One more hookSaturday, June 30, 2012
  27. 27. Prep Create a new page titled “Are You Dolly?” (we’ll assume it gets the default slug are-you-dolly)Saturday, June 30, 2012
  28. 28. Mark It Up create theme file page-are-you-dolly.php: <?php get_header(); ?> <div id="primary"> <div id="content" role="main"> <h1 class="entry-title">Are You Dolly?</h1> <button id="ajax-recipe-impersonate-dolly">Im Dolly</button> <p id="ajax-recipe-dolly-message"> If youre Dolly, I have a message for you. </p> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>Saturday, June 30, 2012
  29. 29. Inline JavaScript For now we’ll add a script to page-are-you-dolly.php: <script> jQuery( function( $ ) { var $message = $( #ajax-recipe-dolly-message ); $( #ajax-recipe-impersonate-dolly ).click( function() { $message.html( ... ); $.ajax( { url: <?php echo admin_url( admin-ajax.php ); ?>, data: { action: hello_dolly }, dataType: text, success: function( data ) { $message.html( data ); } } ); } ); } ); </script> <?php get_footer(); ?>Saturday, June 30, 2012
  30. 30. Gimme jQuery On the front end, we have to ask for it As of WordPress 3.3, we can do this in page-are-you-dolly.php: <?php wp_enqueue_script( jquery ); ?> <?php get_header() ?> ...Saturday, June 30, 2012
  31. 31. Let the Front End In A different ajax action fires for non-logged-in users class AjaxRecipesTheme { static function load() { ... add_action( wp_ajax _nopriv _hello_dolly, array( __CLASS__, action_wp_ajax_hello_dolly ) ); } ... }Saturday, June 30, 2012
  32. 32. Sing itSaturday, June 30, 2012
  33. 33. Refinement: Spider Garnish Ingredients: 1 spider template tweaksSaturday, June 30, 2012
  34. 34. Spider (a.k.a. web spinner)Saturday, June 30, 2012
  35. 35. Drop your spider in the theme themes !"" index.php !"" recipes-child #   !"" hello-admin.js #   !"" functions.php #   !"" spinner.gif #   $"" style.css !"" twentyeleven ... $"" twentytenSaturday, June 30, 2012
  36. 36. Load the spider in page-are-you-dolly.php: <button id="ajax-recipe-impersonate-dolly">Im Dolly</button> <p id="ajax-recipe-spinner" style="display:none;"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/spinner.gif" alt="..." /> </p> <p id="ajax-recipe-dolly-message"> If youre Dolly, I have a message for you. </p>Saturday, June 30, 2012
  37. 37. Show and hide the spider in page-are-you-dolly.php: var $message = $( #ajax-recipe-dolly-message ), $spinner = $( #ajax-recipe-spinner ); $( #ajax-recipe-impersonate-dolly ).click( function() { $message.hide(); $spinner.show(); $.ajax( { url: <?php echo admin_url( admin-ajax.php ); ?>, data: { action: hello_dolly }, dataType: text, success: function( data ) { $spinner.hide(); $message.show().html( data ); }Saturday, June 30, 2012
  38. 38. Onto Our TuffetSaturday, June 30, 2012
  39. 39. Recipe: Spider Ghoulash Ingredients: many spidersSaturday, June 30, 2012
  40. 40. Saturday, June 30, 2012
  41. 41. Spider GhoulashSaturday, June 30, 2012
  42. 42. A Cry for Reason David DeSandro / Metafizzy creator of the ultra-cool isotope library pleads: “Isotope enables a wealth of functionality. But just because you can take advantage of its numerous features together, doesn’t mean you necessarily should. For each each feature you implement with Isotope, consider the benefit gained by users, at the cost of another level of complexity to your interface.”Saturday, June 30, 2012
  43. 43. Saturday, June 30, 2012
  44. 44. Programmer? Maybe ask the users. Users? Maybe show them the ghoulash. Everyone? Maybe AJAX ALL THE THINGS!Saturday, June 30, 2012
  45. 45. Refinement: Script File Ingredients: a separate script file enqueueing server code configuration server codeSaturday, June 30, 2012
  46. 46. Cut the Inline Script Create a new theme file hello.js Copy the <script> contents in page-are-you-dolly.php Paste the code into hello.js Remove entire <script> from page-are-you-dolly.php page-are-you-dolly.php inline javascript hello.jsSaturday, June 30, 2012
  47. 47. themes !"" index.php !"" recipes-child #   !"" hello.js #   !"" hello-admin.js #   !"" functions.php #   !"" spinner.gif #   $"" style.css !"" twentyeleven ... $"" twentytenSaturday, June 30, 2012
  48. 48. We’ll expand this call in page-are-you-dolly.php: <?php wp_enqueue_script( jquery ); ?> to load both jQuery and our new hello script: <?php wp_enqueue_script( ajax-recipes-hello, get_stylesheet_directory_uri() . /hello.js, array( jquery ), false, true ); ?>Saturday, June 30, 2012
  49. 49. Unmix It We need to get rid of the PHP code in hello.js: url: <?php echo admin_url( admin-ajax.php ); ?>, We can get that URL into a JavaScript variable (trust me): $.ajax( { url: ajaxRecipesConfig.ajaxurl, data: { action: hello_dolly }, dataType: text, success: function( data ) { $spinner.hide(); $message.show().html( data ); } } );Saturday, June 30, 2012
  50. 50. Localize? Sort of. wp_localize_script() will create our variable for us. Back in page-are-you-dolly.php: wp_enqueue_script( ajax-recipes-hello, ... ); $hello_config = array( ajaxurl => admin_url( admin-ajax.php ) ); wp_localize_script( ajax-recipes-hello, ajaxRecipesConfig, $hello_config );Saturday, June 30, 2012
  51. 51. That’s It! Go forth and Ajax http://2012.reno.wordcamp.org/session/wordpress-ajax-recipes/ https://github.com/cyberhobo/wp-ajax-dolly-theme cyberhobo@cyberhobo.net Thanks! WordCamp Reno Tahoe 2012Saturday, June 30, 2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×