WordPress + Ajax recipes for the road

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


Perspective
Empower small organizations with WordPress
Usually the sole coder
Years of experience - coding in a camper


Ajax isn’t Ajax


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.


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 tools

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_Response


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) 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 Child
Description: Twenty Eleven child for Ajax recipes
Author: Dylan Kuhn
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

Activate your new theme :)


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


Back End Script
Create a theme ﬁle 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 Namespace
Create a theme ﬁle 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

}

Enqueue Back End Script
Register a method to call when admin scripts can be queued



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

}
...
}

Enqueue Back End Script
Implement a method to include our hello-admin.js script
...
static function action_admin_enqueue_scripts() {

wp_enqueue_script(
'ajax-recipes-hello-admin',
get_stylesheet_directory_uri() . '/hello-admin.js',
array( 'jquery' ),
false,
true
);

}
...
}


Register a method to handle Ajax Dolly requests


...
add_action(
'wp_ajax_hello_dolly',
array(
__CLASS__,
'action_wp_ajax_hello_dolly'
)
);

}
...
}


Add the method to handle Ajax Dolly requests

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


Ready to Serve!
themes
!"" index.php
!"" recipes-child
#   !"" 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 Dolly
A new page and template
One 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
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">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(); ?>

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' ); ?>',
dataType: 'text',
success: function( data ) {

$message.html( data );

}
} );
} );
} );
</script>
<?php get_footer(); ?>

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


Let the Front End In
A different ajax action fires for non-logged-in users


...
add_action(
'wp_ajax _nopriv _hello_dolly',
array(
__CLASS__,
'action_wp_ajax_hello_dolly'
)
);

}
...
}


Sing it


Refinement: Spider Garnish

Ingredients:

1 spider
template tweaks


Spider

(a.k.a. web spinner)


Drop your spider in the theme
themes
!"" index.php
!"" recipes-child
#   !"" functions.php
#   !"" spinner.gif
#   $"" style.css
!"" twentyeleven
...
$"" twentyten


Load the spider
in page-are-you-dolly.php:

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


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( {
dataType: 'text',

$spinner.hide();
$message.show().html( data );

}


Onto Our Tuffet


Recipe: Spider Ghoulash

Ingredients:

many spiders


Spider Ghoulash


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


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

Refinement: Script File

Ingredients:

a separate script file
enqueueing server code
configuration server code


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


themes
!"" index.php
!"" recipes-child
#   !"" hello.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 It
We need to get rid of the PHP code in hello.js:

We can get that URL into a JavaScript variable (trust me):
$.ajax( {
url: ajaxRecipesConfig.ajaxurl,
dataType: 'text',

$spinner.hide();
$message.show().html( data );

}
} );

Localize? Sort of.
wp_localize_script() will create our variable for us.
Back in page-are-you-dolly.php:
wp_enqueue_script(
...
);

$hello_config = array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
);

wp_localize_script(
'ajaxRecipesConfig',
$hello_config
);

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


WordPress + Ajax recipes for the road

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to WordPress + Ajax recipes for the road

Similar to WordPress + Ajax recipes for the road (20)

Recently uploaded

Recently uploaded (20)

WordPress + Ajax recipes for the road