WordPress Ajax Recipes
-
Upload
cyberhobo -
Category
Technology
-
view
105 -
download
3
description
Transcript of WordPress Ajax Recipes
WordPress + Ajax
recipes for the road
WordCamp Reno Tahoe 2012
Saturday, June 30, 2012
Dylan Kuhn
Freelance WordPress Hacker
http://www.cyberhobo.net@dylankuhn on Twitter
Saturday, June 30, 2012
Perspective
Empower small organizations with WordPress
Usually the sole coder
Years of experience - coding in a camper
Saturday, June 30, 2012
Ajax isn’t Ajax
Saturday, June 30, 2012
AJAX
synchronous missing server push? threads?
avaScript or jQuery. or...d3js? CoffeeScript?
nd wat?
ML Mm. Text works. Mucho JSON. It’s your data, but must be HTTP friendly.
Saturday, June 30, 2012
So what is it?
It’s about what the web is made of.
HTML: Documents
+Javascript: Self-Contained Apps
+Ajax: Connected Apps
Saturday, June 30, 2012
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
Unfortunately
apps are harder to write
Fortunately
WordPress gives us toolsSaturday, June 30, 2012
JavaScript librariesjQuery, Scriptalicious, Prototype
Client script handlingwp_register_script(), wp_enqueue_script()
Server request handling hookswp_ajax_$action, wp_ajax_nopriv_$action
XML generation classWP_Ajax_Response
Saturday, June 30, 2012
Recipe: Ajax Hello Dolly
Ingredients:
Fresh WordPress installHello Dolly pluginInstant TwentyEleven child themeA back end jQuery scriptA few theme (or plugin) functions
Saturday, June 30, 2012
Prep
Install WordPress
Activate the Hello Dolly Plugin
Saturday, June 30, 2012
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 files
Saturday, June 30, 2012
Instant Child Theme
Create a theme file style.css:/*Theme Name: Ajax Recipes ChildDescription: Twenty Eleven child for Ajax recipes Author: Dylan KuhnTemplate: twentyeleven*/
@import url("../twentyeleven/style.css");
Activate your new theme :)
Saturday, June 30, 2012
themes!"" index.php!"" recipes-child# $"" style.css!"" twentyeleven...$"" twentyten
Saturday, June 30, 2012
Back End ScriptCreate 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
themes!"" index.php!"" recipes-child# !"" hello-admin.js# $"" style.css!"" twentyeleven...$"" twentyten
Saturday, June 30, 2012
Simple Theme NamespaceCreate a theme file functions.php:
<?php
// Pattern: static class as PHP 5.2 namespace
AjaxRecipesTheme::load();
class AjaxRecipesTheme {
static function load() { // We'll call add_action and add_filter here }
// More static methods will go here
}Saturday, June 30, 2012
Enqueue Back End ScriptRegister 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
Enqueue Back End ScriptImplement 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
class AjaxRecipesTheme {
static function load() {... add_action( 'wp_ajax_hello_dolly', array( __CLASS__, 'action_wp_ajax_hello_dolly' ) );
}...}
Register a method to handle Ajax Dolly requests
Saturday, June 30, 2012
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
Ready to Serve!
themes!"" index.php!"" recipes-child# !"" hello-admin.js# !"" functions.php# $"" style.css!"" twentyeleven...$"" twentyten
Saturday, June 30, 2012
And the back end looks...
exactly the same as before
but! and this is my but:
Saturday, June 30, 2012
What is it doing in there?
Saturday, June 30, 2012
Nice! But will Dolly be listening?
In the back end?To that tiny but?
Saturday, June 30, 2012
Recipe: Hello Dolly, World!
Ingredients:
Ajax Hello DollyA new page and templateOne more hook
Saturday, June 30, 2012
Prep
Create a new page titled “Are You Dolly?”
(we’ll assume it gets the default slug are-you-dolly)
Saturday, June 30, 2012
Mark It Up
<?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">I'm Dolly</button>
<p id="ajax-recipe-dolly-message"> If you're Dolly, I have a message for you. </p>
</div><!-- #content --></div><!-- #primary -->
<?php get_footer(); ?>
create theme file page-are-you-dolly.php:
Saturday, June 30, 2012
Inline JavaScriptFor 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
Gimme jQueryOn the front end, we have to ask for it
<?php wp_enqueue_script( 'jquery' ); ?>
<?php get_header() ?>...
As of WordPress 3.3, we can do this in page-are-you-dolly.php:
Saturday, June 30, 2012
Let the Front End In
class AjaxRecipesTheme {
static function load() {... add_action(
'wp_ajax_nopriv_hello_dolly', array( __CLASS__, 'action_wp_ajax_hello_dolly' ) );
}...}
A different ajax action fires for non-logged-in users
Saturday, June 30, 2012
Sing it
Saturday, June 30, 2012
Refinement: Spider Garnish
Ingredients:
1 spidertemplate tweaks
Saturday, June 30, 2012
Spider
(a.k.a. web spinner)
Saturday, June 30, 2012
Drop your spider in the theme
themes!"" index.php!"" recipes-child# !"" hello-admin.js# !"" functions.php# !"" spinner.gif# $"" style.css!"" twentyeleven...$"" twentyten
Saturday, June 30, 2012
Load the spider
<button id="ajax-recipe-impersonate-dolly">I'm 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 you're Dolly, I have a message for you.</p>
in page-are-you-dolly.php:
Saturday, June 30, 2012
Show and hide the spider
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 );
}
in page-are-you-dolly.php:
Saturday, June 30, 2012
Onto Our Tuffet
Saturday, June 30, 2012
Recipe: Spider Ghoulash
Ingredients:
many spiders
Saturday, June 30, 2012
Saturday, June 30, 2012
Spider Ghoulash
Saturday, June 30, 2012
A Cry for Reason
David DeSandro / Metafizzycreator of the ultra-cool isotope librarypleads:
“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
Saturday, June 30, 2012
Programmer? Maybe ask the users.Users? Maybe show them the ghoulash.Everyone? Maybe AJAX ALL THE THINGS!
Saturday, June 30, 2012
Refinement: Script File
Ingredients:
a separate script fileenqueueing server codeconfiguration server code
Saturday, June 30, 2012
Cut the Inline Script
Create a new theme file hello.jsCopy the <script> contents in page-are-you-dolly.phpPaste the code into hello.jsRemove entire <script> from page-are-you-dolly.php
page-are-you-dolly.php
hello.js
inline javascript
Saturday, June 30, 2012
themes!"" index.php!"" recipes-child# !"" hello.js# !"" hello-admin.js# !"" functions.php# !"" spinner.gif# $"" style.css!"" twentyeleven...$"" twentyten
Saturday, June 30, 2012
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
Unmix ItWe 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
Localize? Sort of.
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);
wp_localize_script() will create our variable for us.
Saturday, June 30, 2012
That’s It!Go forth and Ajax
http://2012.reno.wordcamp.org/session/wordpress-ajax-recipes/
https://github.com/cyberhobo/wp-ajax-dolly-theme
Thanks!
WordCamp Reno Tahoe 2012
Saturday, June 30, 2012