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 Las Vegas 2013
1. Weaving JavaScript
-- in and out of --
WordPress
WordCamp Las Vegas 2013
slides: http://www.slideshare.net/jeffreyzinn/wclv13-javascript
code: https://gist.github.com/jeffreyzinn/7953881
Friday, December 13, 13
2. Jeffrey Zinn
• Co-founder of Pixel Jar
• WordCamp OC co-organizer
• AdSanity co-developer
• @jeffreyzinn
• jeff@jzinn.us
surfer, WordPress fanboy,
avid backpacker, euro gamer,
soccer hooligan, traveler,
voracious coffee drinker
Friday, December 13, 13
3. Need To Know
1. JavaScript
2. Functions
3. Actions
Friday, December 13, 13
4. Topics
1. 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 nonlocal sources
4. Localize Script - making data from PHP
available in JavaScript
Friday, December 13, 13
6. Example 1
What we are doing:
Load a custom JavaScript called custom.js from
my theme’s /js directory.
load
me
Friday, December 13, 13
7. 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/wpincludes/js/jquery/jquery.js?ver=1.7.2'></script>
<script type="text/javascript" src="http://wp.start/wpcontent/themes/billerickson-BE-Genesis-Child-c73d97a/js/
custom.js"></script>
</head>
Friday, December 13, 13
8. Do Not...
...echo out a <script> tag using using the
wp_head/wp_footer action
<?php
add_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>';
}
?>
Friday, December 13, 13
9. 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
Friday, December 13, 13
10. The Process
1. 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.
Friday, December 13, 13
11. wp_register_script()
Description:
Safe way of registering JavaScripts in
WordPress for later use:
<?php
wp_register_script
( $handle, $src, $deps, $ver, $in_footer );
?>
string
string
array
string
boolean
give the file
a unique
nickname
(required)
Friday, December 13, 13
where is
the file
what other
files have to
be loaded
first
the
script’s
version
number
should WP
try and load
this in the
footer
12. wp_register_script()
Description:
Safe way of registering JavaScripts in
WordPress for later use:
<?php
wp_register_script
( $handle, $src, $deps, $ver, $in_footer );
?>
string
string
array
string
boolean
Note:
admin_enqueue_scripts to call it on the admin side, or use
login_enqueue_scripts for login screens.
Friday, December 13, 13
13. Example 1.1
What 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' );
Friday, December 13, 13
14. Example 1.2
What we are doing:
Register and enqueue custom.js as separate
actions.
<?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' );
}
?>
Friday, December 13, 13
15. Example 1.3
What 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' );
Friday, December 13, 13
16. Example 1.4
What we are doing:
Load custom.js without registering.
<?php
add_action( 'wp_enqueue_scripts', 'custom_script_enqueue' );
function custom_script_enqueue() {
$src = get_stylesheet_directory_uri() . '/js/custom.js' ;
wp_enqueue_script( 'custom-script', $src, array( 'jquery' ), '1', TRUE );
}
?>
Friday, December 13, 13
17. (works with styles too)
• wp_register_style()
• wp_deregister_style()
• wp_enqueue_style()
• wp_dequeue_style()
Friday, December 13, 13
19. Available Libraries
Script
Handle
SWFUpload
swfupload
jQuery UI Core
jquery-ui-core
jQuery UI Accordion
jquery-ui-accordion
jQuery UI Datepicker
jquery-ui-datepicker
ThickBox
thickbox
jQuery Hotkeys
jquery-hotkeys
...plus many other scripts
http://codex.wordpress.org/Function_Reference/
wp_enqueue_script#Default_scripts_included_with_WordPress
Friday, December 13, 13
20. Example 2.1
What we are doing:
Load and use jQuery UI Draggable, which is preregistered.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_draggable' );
function enqueue_draggable() {
wp_enqueue_script( 'jquery-ui-draggable' );
}
?>
Friday, December 13, 13
21. Example 2.2
What 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' );
}
?>
Friday, December 13, 13
22. 3. Using CDNs
load JavaScripts from non-local sources
Friday, December 13, 13
23. Example 3.1
What 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.10.2/jquery.min.js';
wp_register_script( 'jquery', $src, array(), '1.10.2' );
wp_enqueue_script( 'jquery' );
}
?>
Friday, December 13, 13
24. Example 3.1
What 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.10.2/jquery.min.js';
wp_register_script( 'jquery', $src, array(), '1.10.2' );
wp_enqueue_script( 'jquery' );
}
?>
Friday, December 13, 13
Keep same handle
for dependencies
25. Example 3.1
What 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.10.2/jquery.min.js';
wp_register_script( 'jquery', $src, array(), '1.10.2' );
wp_enqueue_script( 'jquery' );
}
?>
Friday, December 13, 13
Be careful of version #,
is it still compatible with
WP and your stuff?
28. wp_localize_script()
Description:
Send PHP data into the JavaScript data world.
Usage:
<?php
wp_localize_script( $handle, $object_name, $l10n );
?>
string
string
array
nickname
of script to
send data to
(required)
Friday, December 13, 13
what to call
the object
when it is
in the script
(required)
what data
to send to
the script
(required)
29. wp_localize_script()
Description:
Send PHP data into the JavaScript data world.
Usage:
<?php
wp_localize_script( $handle, $object_name, $l10n );
?>
Note:
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.
Friday, December 13, 13
30. wp_localize_script()
Description:
Send PHP data into the JavaScript data world.
Usage:
<?php
wp_localize_script( $handle, $object_name, $l10n );
?>
Also Note:
$l10n (array) (required) The data itself. The data can be either
a single or multi (as of 3.3) dimensional array.
Friday, December 13, 13
31. Example 4.1
What 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 );
Friday, December 13, 13
32. Example 4.1
What 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' );
in JavaScript the data can be called by
function send_user_data_to_custom() {
userinfo.userid and userinfo.fname
using
$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 );
Friday, December 13, 13