javascript in wordpress (ocwp march 2012)
DESCRIPTION
Short presentation on how to include and remove JavaScript files from your themes and plugins as well as pushing PHP variables into your JavaScript files.TRANSCRIPT
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?