Weaving JavaScript-- in and out of --

WordPressOrange County WordPress Developer’s Meetup March 2012

Topics

• Register and Enqueue Scripts

• Available JavaScript Libraries

• Tap into available CDNs

• Localize 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 so I can use it

• wp_dequeue_script() - remove an enqueued script

wp_register_script()

Description:Safe way of registring javascripts in WordPress for later use with wp_enqueue_script().

Usage:<?php 

wp_register_script ( $handle, $src, $deps, $ver, $in_footer ); 

?>

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

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

Example 1What are we even doing:Load a custom javascript called custom.js from my theme’s /js folder into the theme.

load me

Example 1What are we even doing:Load a custom javascript called custom.js from my theme’s /js folder into the theme.

<?php /** JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() { $src = get_stylesheet_directory_uri() . '/js/custom.js' ; wp_register_script( 'custom-script', $src, array('jquery'), '1', TRUE );

wp_enqueue_script( 'custom-script' );}

?> 

Example 2What are we even doing:Load custom.js conditionally for pages only.<?php /** JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() { $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' );}

?> 

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 3What are we even doing:Load swfupload and thickbox which are pre-registered!

<?php /** JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() {

wp_enqueue_script( 'swfupload' );wp_enqueue_script( 'thickbox' );

}

?> 

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

<?php /** JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() {

wp_deregister_script( 'jquery' );

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

wp_enqueue_script( 'jquery' );}

?> 

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

Keep handle the same for dependencies

<?php /** JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() {

wp_deregister_script( 'jquery' );

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

wp_enqueue_script( 'jquery' );}

?> 

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

<?php /** JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() {

wp_deregister_script( 'jquery' );

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

wp_enqueue_script( 'jquery' );}

?> 

Be careful of version #

wp_localize_script()

Description:Send PHP data into the JavaScript data world.

Usage:<?php 

wp_localize_script( $handle, $object_name, $l10n ); 

?>

Example 5What are we even doing:Prepare PHP variables for use in custom.js.<?php /** JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() {

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

wp_enqueue_script( 'custom-script' );

$data = array( 'user_id' => $uid, 'fname' => $first_name  );wp_localize_script( 'custom-script', 'user_info', $data );

}

?> 

Example 5What are we even doing:Prepare PHP variables for use in custom.js.<?php /** JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() {

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

wp_enqueue_script( 'custom-script' );

$data = array( 'gravatar' => $gravatar, 'user_id' => $uid  );wp_localize_script( 'custom-script', 'user_info', $data );

}

?> 

$data = array( 'user_id' => $uid, 'fname’ => $first_name  );wp_localize_script( 'custom-script', 'user_info', $data );

<script type=”text/javascript”>

alert(“Hey, “ + user_info.fname); 

</script>

Example 6<?php /** JavaScripts **/add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );function custom_enqueue_scripts() {

// Load jQuery from Google APIswp_deregister_script( 'jquery' );$src = ‘http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’;wp_register_script( 'jquery', $src, array(), '1.7.1');wp_enqueue_script( 'jquery' );

// Load my custom javascript file and send info$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' );$data = array( 'fname' => ‘Jeff’, 'lname' => ‘Zinn’  );wp_localize_script( 'custom-script', 'user_info', $data );

endif;

}

?> 

Questions?