Embed Size (px)
DESCRIPTION
Reviews the basis of using JavaScript within WordPress. How to load in scripts correctly and move PHP data into JavaScripts for later use. Presented at WordCamp LA 2012
Citation preview
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
