WordPress Ajax Recipes
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

WordPress Ajax Recipes

  • 4,808 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,808
On Slideshare
2,946
From Embeds
1,862
Number of Embeds
5

Actions

Shares
Downloads
15
Comments
0
Likes
3

Embeds 1,862

http://www.cyberhobo.net 1,840
http://localhost 16
https://translate.googleusercontent.com 3
https://twitter.com 2
http://translate.googleusercontent.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WordPress + Ajax recipes for the road WordCamp Reno Tahoe 2012Saturday, June 30, 2012
  • 2. Dylan Kuhn Freelance WordPress Hacker http://www.cyberhobo.net @dylankuhn on TwitterSaturday, June 30, 2012
  • 3. Perspective Empower small organizations with WordPress Usually the sole coder Years of experience - coding in a camperSaturday, June 30, 2012
  • 4. Ajax isn’t AjaxSaturday, June 30, 2012
  • 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. 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. 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. Unfortunately apps are harder to write Fortunately WordPress gives us toolsSaturday, June 30, 2012
  • 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. 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. Prep Install WordPress Activate the Hello Dolly PluginSaturday, June 30, 2012
  • 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. 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. themes !"" index.php !"" recipes-child #   $"" style.css !"" twentyeleven ... $"" twentytenSaturday, June 30, 2012
  • 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. themes !"" index.php !"" recipes-child #   !"" hello-admin.js #   $"" style.css !"" twentyeleven ... $"" twentytenSaturday, June 30, 2012
  • 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. 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. 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. 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. 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. Ready to Serve! themes !"" index.php !"" recipes-child #   !"" hello-admin.js #   !"" functions.php #   $"" style.css !"" twentyeleven ... $"" twentytenSaturday, June 30, 2012
  • 23. And the back end looks... exactly the same as before but! and this is my but:Saturday, June 30, 2012
  • 24. What is it doing in there?Saturday, June 30, 2012
  • 25. Nice! But will Dolly be listening? In the back end? To that tiny but?Saturday, June 30, 2012
  • 26. Recipe: Hello Dolly, World! Ingredients: Ajax Hello Dolly A new page and template One more hookSaturday, June 30, 2012
  • 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. 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. 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. 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. 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. Sing itSaturday, June 30, 2012
  • 33. Refinement: Spider Garnish Ingredients: 1 spider template tweaksSaturday, June 30, 2012
  • 34. Spider (a.k.a. web spinner)Saturday, June 30, 2012
  • 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. 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. 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. Onto Our TuffetSaturday, June 30, 2012
  • 39. Recipe: Spider Ghoulash Ingredients: many spidersSaturday, June 30, 2012
  • 40. Saturday, June 30, 2012
  • 41. Spider GhoulashSaturday, June 30, 2012
  • 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. Saturday, June 30, 2012
  • 44. Programmer? Maybe ask the users. Users? Maybe show them the ghoulash. Everyone? Maybe AJAX ALL THE THINGS!Saturday, June 30, 2012
  • 45. Refinement: Script File Ingredients: a separate script file enqueueing server code configuration server codeSaturday, June 30, 2012
  • 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. themes !"" index.php !"" recipes-child #   !"" hello.js #   !"" hello-admin.js #   !"" functions.php #   !"" spinner.gif #   $"" style.css !"" twentyeleven ... $"" twentytenSaturday, June 30, 2012
  • 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. 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. 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. 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