What is JavaScript? Embedding JavaScript with HTML JavaScript conventions Variables in JavaScript
JavaScript in WordPress (OCWP March 2012)
-
Upload
jeffrey-zinn -
Category
Technology
-
view
693 -
download
2
description
Transcript of JavaScript in WordPress (OCWP March 2012)
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?