WordPress Ajax Recipes

5,812 views

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
5,812
On SlideShare
0
From Embeds
0
Number of Embeds
2,505
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×