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

cyberhobo@cyberhobo.net

Thanks!

WordCamp Reno Tahoe 2012

Saturday, June 30, 2012