WCLA12 JavaScript

Weaving JavaScript
-- in and out of --

WordPress
WordCamp Los Angeles 2012

slides: http://www.slideshare.net/jeffreyzinn/wcla12-javascript
code: https://gist.github.com/3718135

Jeffrey Zinn
• Co-founder of Pixel Jar
• WordCamp OC co-organizer
• AdSanity co-developer
• @jeffreyzinn
• jeff@jzinn.us
surfer, WordPress fanboy,
avid backpacker, euro gamer,
soccer hooligan, traveler,
voracious coffee drinker

Topics
1. Loading JavaScripts - making
JavaScripts available to themes, plugins
and code
2. Available Libraries - JavaScripts that
are already available in a default
WordPress installation
3. Using CDNs - load JavaScripts from non-
local sources
4. Localize Script - making data from PHP
available in JavaScript

1. Loading Javascript
making JavaScripts available to themes,
plugins and code

Example 1
What we are doing:
Load a custom JavaScript called custom.js from
my theme’s /js directory.

load
me

Do Not...
...simply add a <script> tag into a template or
header ﬁle
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>WP Starter Setup — Just another WordPress site</title>
<link rel="stylesheet" href="http://wp.start/wp-content/
themes/billerickson-BE-Genesis-Child-c73d97a/style.css"
type="text/css" media="screen" />
<script type='text/javascript' src='http://wp.start/wp-
includes/js/jquery/jquery.js?ver=1.7.2'></script>
<script type="text/javascript" src="http://wp.start/wp-
content/themes/billerickson-BE-Genesis-Child-c73d97a/js/
custom.js"></script>
</head>

Do Not...
...echo out a <script> tag using using the
wp_head/wp_footer action

<?php
add_action( 'wp_head', 'load_my_script' );
function load_my_script() {

$src = get_stylesheet_directory_uri() . '/js/custom.js’;
echo '<script type="text/javascript" src="' . $src . '”></script>';

}
?>

Functions
• wp_register_script() - get ready to use a
script (but don’t load it up just yet)

• wp_deregister_script() - remove a
registered script

• wp_enqueue_script() - load that script
into my theme/plugin so I can use it

• wp_dequeue_script() - remove an
enqueued script

The Process
1. Use the wp_enqueue_scripts action to
load in your selected JavaScripts

2. Stage a script by calling the
wp_register_script function

3. Load the script from #2 using the
wp_enqueue_script function

Often on functions.php, but could be
elsewhere in your theme or plugin code.

wp_register_script()
Description:
Safe way of registering JavaScripts in
WordPress for later use:

<?php
wp_register_script
( $handle, $src, $deps, $ver, $in_footer );
?> string string array string boolean

give the file where is what other the should WP
a unique the file files have to script’s try and load
nickname be loaded version this in the
(required) first number footer

wp_register_script()
Description:
Safe way of registering JavaScripts in
WordPress for later use:

<?php
wp_register_script
( $handle, $src, $deps, $ver, $in_footer );
?> string string array string boolean

Note:
admin_enqueue_scripts to call it on the admin side, or use
login_enqueue_scripts for login screens.

Example 1.1
What we are doing:
Load a custom JavaScript called custom.js from
my theme’s /js directory.

<?php
add_action( 'wp_enqueue_scripts', 'simple_load_script' );
function simple_load_script() {

$src = get_stylesheet_directory_uri() . '/js/custom.js' ;
wp_register_script( 'custom-script', $src, array( 'jquery' ), '1', TRUE );

wp_enqueue_script( 'custom-script' );
}
?>

Example 1.2
What we are doing:
Register and enqueue custom.js as separate
actions.
<?php
/** Register JavaScripts **/
add_action( 'wp_enqueue_scripts', 'custom_register_scripts' );
function custom_register_scripts() {


}

/** Enqueue JavaScripts **/
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );
function custom_enqueue_scripts() {


}
?>

Example 1.3
What we are doing:
Load custom.js conditionally for pages only.

<?php
add_action( 'wp_enqueue_scripts', 'custom_script_for_pages' );
function custom_script_for_pages() {


if ( is_page() )
}
?>

2. Available Libraries
JavaScripts that are already available in
a default WordPress installation

Available Libraries
Script Handle
Scriptaculous Root scriptaculous-root
SWFUpload swfupload
jQuery UI Core jquery-ui-core
jQuery UI Accordion jquery-ui-accordion
jQuery UI Datepicker jquery-ui-datepicker
ThickBox thickbox
jQuery Hotkeys jquery-hotkeys
...plus 64 other scripts
http://codex.wordpress.org/Function_Reference/
wp_enqueue_script#Default_scripts_included_with_WordPress

Example 2.1
What we are doing:
Load and use jQuery UI Draggable, which is pre-
registered, and make our widgets draggable!

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_draggable' );
function enqueue_draggable() {

wp_enqueue_script( 'jquery-ui-draggable' );

}
?>

Example 2.2
What we are doing:
Load a custom script called draggable.js in /js
directory that uses jQuery UI Draggable and
make our widgets draggable!
<?php

/** Corresponding JavaScript: https://gist.github.com/3718542 **/

add_action( 'wp_enqueue_scripts', 'custom_draggable_script' );
function custom_draggable_script() {

$src = get_stylesheet_directory_uri() . '/js/draggable.js' ;
wp_register_script( 'custom-draggable-script', $src,
array( 'jquery','jquery-ui-draggable' ), '1', TRUE );

wp_enqueue_script( 'custom-draggable-script' );

}

?>

3. Using CDNs
load JavaScripts from non-local sources

Example 3.1
What we are doing:
Load jquery from an external source.

<?php
add_action( 'wp_enqueue_scripts', 'load_jquery_from_googleapis' );
function load_jquery_from_googleapis() {

wp_deregister_script( 'jquery' );

$src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
wp_register_script( 'jquery', $src, array(), '1.7.2' );

wp_enqueue_script( 'jquery' );

}
?>

Example 3.1
What we are doing:
Load jQuery from an external source.

<?php




}
?> Keep same handle
for dependencies

Example 3.1
What we are doing:
Load jquery from an external source.

<?php



Be careful of version #,
}
?> is it still compatible with
WP and your stuff?

4. Localize Script
making data from PHP
available in JavaScript

Do Not...
...use PHP to build JavaScript code
<?php
add_action( 'wp_head', 'build_my_script' );
function build_my_script() {

global $current_user;
get_currentuserinfo();

echo "rn";
echo '<script type="text/javascript">' . "rn";
echo "t" . 'var userid = "' . esc_js( $current_user->ID ) . '";';
echo "rn";
echo "t" . 'var fname = "' . esc_js( $current_user->user_firstname ) . '";';
echo "rn";
echo '</script>' . "rn";

}
?>

wp_localize_script()

Description:
Send PHP data into the JavaScript data world.

Usage:
<?php
wp_localize_script( $handle, $object_name, $l10n );
?> string string array

nickname what to call what data
of script to the object to send to
send data to when it is the script
(required) in the script (required)
(required)


Description:

Usage:
<?php
?>

Note:
wp_localize_script() must be called AFTER the script it's being
attached to has been enqueued. It doesn't put the localized
script in a queue for later queued scripts.


Description:

Usage:
<?php
?>

Also Note:
$l10n (array) (required) The data itself. The data can be either
a single or multi (as of 3.3) dimensional array.

Example 4.1
What we are doing:
Send user ID and ﬁrst name from PHP over to
custom.js and alert the user.
<?php

add_action( 'wp_enqueue_scripts', 'send_user_data_to_custom' );
function send_user_data_to_custom() {


$data = array(
'userid' => $current_user->ID,
'fname' => $current_user->user_firstname
);

wp_localize_script( 'custom-script', 'userinfo', $data );
}
?>

Example 4.1
What we are doing:
Send user ID and ﬁrst name from PHP over to
custom.js and alert the user.
<?php

in JavaScript the data can be called by
add_action( 'wp_enqueue_scripts', 'send_user_data_to_custom' ); using
function send_user_data_to_custom() {
userinfo.userid and userinfo.fname

+

$data = array(
'userid' => $current_user->ID,
'fname' => $current_user->user_firstname
);

wp_localize_script( 'custom-script', 'userinfo', $data );
}
?>

Example 4.1
JavaScript: custom.js
jQuery(document).ready(function($){
alert("Hey, " + userinfo.fname + ", your user ID is " + userinfo.userid + ". Boom!");
});

questions?
(thanks!)

slides: http://www.slideshare.net/jeffreyzinn/wcla12-javascript
code: https://gist.github.com/3718135

WCLA12 JavaScript

More Related Content

What's hot

Viewers also liked

Similar to WCLA12 JavaScript

Recently uploaded

WCLA12 JavaScript