Weaving JavaScript-- in and out of --
WordPressWordCamp Los Angeles 2012
slides: http://www.slideshare.net/jeffreyzinn/wcla12-javascriptcode: https://gist.github.com/3718135
Jeffrey Zinn• Co-founder of Pixel Jar• WordCamp OC co-organizer• AdSanity co-developer• @jeffreyzinn• [email protected]
surfer, WordPress fanboy, avid backpacker, euro gamer, soccer hooligan, traveler,voracious coffee drinker
Topics1. 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 Javascriptmaking JavaScripts available to themes,
plugins and code
Example 1What 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 file
<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
<?phpadd_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 Process1. 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.
Description:Safe way of registering JavaScripts in WordPress for later use:
<?php wp_register_script ( $handle, $src, $deps, $ver, $in_footer );
?>
wp_register_script()
string string array string boolean
give the file a unique
nickname(required)
where isthe file
thescript’sversionnumber
should WPtry and loadthis in the
footer
what otherfiles have to
be loadedfirst
wp_register_script()Description:Safe way of registering JavaScripts in WordPress for later use:
<?php wp_register_script ( $handle, $src, $deps, $ver, $in_footer );
?>
admin_enqueue_scripts to call it on the admin side, or use login_enqueue_scripts for login screens.
string string array string boolean
Note:
Example 1.1What 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
<?php /** Register JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_register_scripts' );function custom_register_scripts() {
$src = get_stylesheet_directory_uri() . '/js/custom.js' ; wp_register_script( 'custom-script', $src, array( 'jquery' ), '1', TRUE );
}
/** Enqueue JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() {
wp_enqueue_script( 'custom-script' );
}?>
What we are doing:Register and enqueue custom.js as separate actions.
Example 1.3What 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() { $src = get_stylesheet_directory_uri() . '/js/custom.js' ; wp_register_script( 'custom-script', $src, array( 'jquery' ), '1', TRUE );
if ( is_page() ) wp_enqueue_script( 'custom-script' );
}?>
2. Available LibrariesJavaScripts that are already available in
a default WordPress installation
Available Libraries
http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress
Script HandleScriptaculous Root scriptaculous-root
SWFUpload swfuploadjQuery UI Core jquery-ui-core
jQuery UI Accordion jquery-ui-accordionjQuery UI Datepicker jquery-ui-datepicker
ThickBox thickboxjQuery Hotkeys jquery-hotkeys
...plus 64 other scripts
Example 2.1What 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.2What 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 CDNsload JavaScripts from non-local sources
Example 3.1What 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' );
}?>
<?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.1What we are doing:Load jQuery from an external source.
Keep same handlefor dependencies
Example 3.1What 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' );
}?>
Be careful of version #,is it still compatible with WP and your stuff?
4. Localize Scriptmaking data from PHP available in JavaScript
Do Not......use PHP to build JavaScript code<?phpadd_action( 'wp_head', 'build_my_script' );function build_my_script() { global $current_user; get_currentuserinfo(); echo "\r\n"; echo '<script type="text/javascript">' . "\r\n"; echo "\t" . 'var userid = "' . esc_js( $current_user->ID ) . '";';
echo "\r\n"; echo "\t" . 'var fname = "' . esc_js( $current_user->user_firstname ) . '";';
echo "\r\n"; echo '</script>' . "\r\n";
}?>
wp_localize_script()
Description:Send PHP data into the JavaScript data world.
Usage:<?php
wp_localize_script( $handle, $object_name, $l10n ); ?> string arraystring
nicknameof script to
send data to(required)
what to callthe objectwhen it is
in the script(required)
what datato send to the script(required)
wp_localize_script()
Description:Send PHP data into the JavaScript data world.
Usage:<?php
wp_localize_script( $handle, $object_name, $l10n ); ?>
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.
Note:
wp_localize_script()
Description:Send PHP data into the JavaScript data world.
Usage:<?php
wp_localize_script( $handle, $object_name, $l10n ); ?>
$l10n (array) (required) The data itself. The data can be either a single or multi (as of 3.3) dimensional array.
Also Note:
Example 4.1What we are doing:Send user ID and first name from PHP over to custom.js and alert the user.<?php/** Corresponding JavaScript: https://gist.github.com/3718839 **/
add_action( 'wp_enqueue_scripts', 'send_user_data_to_custom' );function send_user_data_to_custom() {
$src = get_stylesheet_directory_uri() . '/js/custom.js' ;wp_register_script( 'custom-script', $src, array( 'jquery' ), '1', TRUE );wp_enqueue_script( 'custom-script' );
global $current_user;get_currentuserinfo();$data = array(
'userid' => $current_user->ID, 'fname' => $current_user->user_firstname);
wp_localize_script( 'custom-script', 'userinfo', $data );}?>
Example 4.1What we are doing:Send user ID and first name from PHP over to custom.js and alert the user.<?php/** Corresponding JavaScript: https://gist.github.com/3718839 **/
add_action( 'wp_enqueue_scripts', 'send_user_data_to_custom' );function send_user_data_to_custom() {
$src = get_stylesheet_directory_uri() . '/js/custom.js' ;wp_register_script( 'custom-script', $src, array( 'jquery' ), '1', TRUE );wp_enqueue_script( 'custom-script' );
global $current_user;get_currentuserinfo();$data = array(
'userid' => $current_user->ID, 'fname' => $current_user->user_firstname);
wp_localize_script( 'custom-script', 'userinfo', $data );}?>
in JavaScript the data can be called by usinguserinfo.userid and userinfo.fname
+
Example 4.1JavaScript: custom.jsjQuery(document).ready(function($){ alert("Hey, " + userinfo.fname + ", your user ID is " + userinfo.userid + ". Boom!");});
questions?(thanks!)
slides: http://www.slideshare.net/jeffreyzinn/wcla12-javascriptcode: https://gist.github.com/3718135
Recommended
