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


http://www.cyberhobo.net




Perspective

Empower small organizations with WordPress

Usually the sole coder

Years of experience - coding in a camper


Ajax isn’t Ajax


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.


So what is it?

It’s about what the web is made of.

HTML: Documents

+Javascript: Self-Contained Apps

+Ajax: Connected Apps


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 :)


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


Recipe: Ajax Hello Dolly

Ingredients:

Fresh WordPress installHello Dolly pluginInstant TwentyEleven child themeA back end jQuery scriptA few theme (or plugin) functions


Prep

Install WordPress

Activate the Hello Dolly Plugin


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


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 :)


themes!"" index.php!"" recipes-child# $"" style.css!"" twentyeleven...$"" twentyten


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 ); } } ); } );} );


themes!"" index.php!"" recipes-child# !"" hello-admin.js# $"" style.css!"" twentyeleven...$"" twentyten


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


static function load() {

add_action( 'admin_enqueue_scripts', array( __CLASS__, 'action_admin_enqueue_scripts' ) );

}...}


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 );

}...}



static function load() {... add_action( 'wp_ajax_hello_dolly', array( __CLASS__, 'action_wp_ajax_hello_dolly' ) );

}...}

Register a method to handle Ajax Dolly requests


Add the method to handle Ajax Dolly requests

class AjaxRecipesTheme {... static function action_wp_ajax_hello_dolly() { exit( hello_dolly_get_lyric() ); }...}


Ready to Serve!

themes!"" index.php!"" recipes-child# !"" hello-admin.js# !"" functions.php# $"" style.css!"" twentyeleven...$"" twentyten


And the back end looks...

exactly the same as before

but! and this is my but:


What is it doing in there?


Nice! But will Dolly be listening?

In the back end?To that tiny but?


Recipe: Hello Dolly, World!

Ingredients:

Ajax Hello DollyA new page and templateOne more hook


Prep

Create a new page titled “Are You Dolly?”

(we’ll assume it gets the default slug are-you-dolly)


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></div>

<?php get_footer(); ?>

create theme file page-are-you-dolly.php:

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(); ?>


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:


Let the Front End In


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


Sing it


Refinement: Spider Garnish

Ingredients:

1 spidertemplate tweaks


Spider

(a.k.a. web spinner)


Drop your spider in the theme

themes!"" index.php!"" recipes-child# !"" hello-admin.js# !"" functions.php# !"" spinner.gif# $"" style.css!"" twentyeleven...$"" twentyten


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:


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:


Onto Our Tuffet


Recipe: Spider Ghoulash

Ingredients:

many spiders


Spider Ghoulash


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.”


http://isotope.metafizzy.co/index.html

http://isotope.metafizzy.co/index.html

Programmer? Maybe ask the users.Users? Maybe show them the ghoulash.Everyone? Maybe AJAX ALL THE THINGS!


Refinement: Script File

Ingredients:

a separate script fileenqueueing server codeconfiguration server code


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


themes!"" index.php!"" recipes-child# !"" hello.js# !"" hello-admin.js# !"" functions.php# !"" spinner.gif# $"" style.css!"" twentyeleven...$"" twentyten


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); ?>


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 );

} } );


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.


That’s It!Go forth and Ajax

http://2012.reno.wordcamp.org/session/wordpress-ajax-recipes/

https://github.com/cyberhobo/wp-ajax-dolly-theme

[email protected]

Thanks!

WordCamp Reno Tahoe 2012






mailto:[email protected]

mailto:[email protected]

WordPress Ajax Recipes

Technology

Transcript of WordPress Ajax Recipes