Weaving JavaScript                   -- in and out of --             WordPress     WordCamp Los Angeles 2012slides: http:/...
Jeffrey Zinn• Co-founder of Pixel Jar• WordCamp OC co-organizer• AdSanity co-developer• @jeffreyzinn• jeff@jzinn.ussurfer,...
Topics1. Loading JavaScripts - making   JavaScripts available to themes, plugins   and code2. Available Libraries - JavaSc...
1. Loading Javascriptmaking JavaScripts available to themes,          plugins and code
Example 1What we are doing:Load a custom JavaScript called custom.js frommy theme’s /js directory.                        ...
Do Not......simply add a <script> tag into a template orheader file<head profile="http://gmpg.org/xfn/11">  <meta http-equi...
Do Not......echo out a <script> tag using using thewp_head/wp_footer action<?phpadd_action( wp_head, load_my_script );func...
Functions• wp_register_script() - get ready to use a  script (but don’t load it up just yet)• wp_deregister_script() - rem...
The Process1. Use the wp_enqueue_scripts action to   load in your selected JavaScripts2. Stage a script by calling the   w...
wp_register_script()Description:Safe way of registering JavaScripts inWordPress for later use:<?php    wp_register_script ...
wp_register_script()Description:Safe way of registering JavaScripts inWordPress for later use:<?php    wp_register_script ...
Example 1.1What we are doing:Load a custom JavaScript called custom.js frommy theme’s /js directory.<?php add_action( wp_e...
Example 1.2What we are doing:Register and enqueue custom.js as separateactions.<?php /** Register JavaScripts **/add_actio...
Example 1.3What we are doing:Load custom.js conditionally for pages only.<?php add_action( wp_enqueue_scripts, custom_scri...
2. Available LibrariesJavaScripts that are already available in    a default WordPress installation
Available Libraries         Script                         HandleScriptaculous Root               scriptaculous-root     S...
Example 2.1What we are doing:Load and use jQuery UI Draggable, which is pre-registered, and make our widgets draggable!<?p...
Example 2.2What we are doing:Load a custom script called draggable.js in /jsdirectory that uses jQuery UI Draggable andmak...
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_go...
Example 3.1What we are doing:Load jQuery from an external source.<?php add_action( wp_enqueue_scripts, load_jquery_from_go...
Example 3.1What we are doing:Load jquery from an external source.<?php add_action( wp_enqueue_scripts, load_jquery_from_go...
4. Localize Script  making 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() {      ...
wp_localize_script()Description:Send PHP data into the JavaScript data world.Usage:<?php     wp_localize_script( $handle, ...
wp_localize_script()Description:Send PHP data into the JavaScript data world.Usage:<?php     wp_localize_script( $handle, ...
wp_localize_script()Description:Send PHP data into the JavaScript data world.Usage:<?php     wp_localize_script( $handle, ...
Example 4.1What we are doing:Send user ID and first name from PHP over tocustom.js and alert the user.<?php/** Correspondin...
Example 4.1What we are doing:Send user ID and first name from PHP over tocustom.js and alert the user.<?php/** Correspondin...
Example 4.1JavaScript: custom.jsjQuery(document).ready(function($){    alert("Hey, " + userinfo.fname + ", your user ID is...
questions?                          (thanks!)slides: http://www.slideshare.net/jeffreyzinn/wcla12-javascript              ...
Upcoming SlideShare
Loading in...5
×

WCLA12 JavaScript

765

Published on

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

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
765
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

WCLA12 JavaScript

  1. 1. Weaving JavaScript -- in and out of -- WordPress WordCamp Los Angeles 2012slides: http://www.slideshare.net/jeffreyzinn/wcla12-javascript code: https://gist.github.com/3718135
  2. 2. Jeffrey Zinn• Co-founder of Pixel Jar• WordCamp OC co-organizer• AdSanity co-developer• @jeffreyzinn• jeff@jzinn.ussurfer, WordPress fanboy,avid backpacker, euro gamer,soccer hooligan, traveler,voracious coffee drinker
  3. 3. Topics1. Loading JavaScripts - making JavaScripts available to themes, plugins and code2. Available Libraries - JavaScripts that are already available in a default WordPress installation3. Using CDNs - load JavaScripts from non- local sources4. Localize Script - making data from PHP available in JavaScript
  4. 4. 1. Loading Javascriptmaking JavaScripts available to themes, plugins and code
  5. 5. Example 1What we are doing:Load a custom JavaScript called custom.js frommy theme’s /js directory. load me
  6. 6. Do Not......simply add a <script> tag into a template orheader 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>
  7. 7. Do Not......echo out a <script> tag using using thewp_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>;}?> 
  8. 8. 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
  9. 9. The Process1. Use the wp_enqueue_scripts action to load in your selected JavaScripts2. Stage a script by calling the wp_register_script function3. 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.
  10. 10. wp_register_script()Description:Safe way of registering JavaScripts inWordPress for later use:<?php  wp_register_script ( $handle, $src, $deps, $ver, $in_footer );?> string string array string boolean give the file where is what other the should WP a unique the file files have to script’s try and load nickname be loaded version this in the (required) first number footer
  11. 11. wp_register_script()Description:Safe way of registering JavaScripts inWordPress 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.
  12. 12. Example 1.1What we are doing:Load a custom JavaScript called custom.js frommy 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 );}?> 
  13. 13. Example 1.2What we are doing:Register and enqueue custom.js as separateactions.<?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 );}?> 
  14. 14. 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 );}?> 
  15. 15. 2. Available LibrariesJavaScripts that are already available in a default WordPress installation
  16. 16. Available Libraries Script HandleScriptaculous Root scriptaculous-root SWFUpload swfupload jQuery UI Core jquery-ui-corejQuery UI Accordion jquery-ui-accordionjQuery UI Datepicker jquery-ui-datepicker ThickBox thickbox jQuery Hotkeys jquery-hotkeys ...plus 64 other scripts http://codex.wordpress.org/Function_Reference/ wp_enqueue_script#Default_scripts_included_with_WordPress
  17. 17. 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 );}?> 
  18. 18. Example 2.2What we are doing:Load a custom script called draggable.js in /jsdirectory that uses jQuery UI Draggable andmake 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 );}?> 
  19. 19. 3. Using CDNsload JavaScripts from non-local sources
  20. 20. 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 );}?> 
  21. 21. 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 );}?>  Keep same handle for dependencies
  22. 22. 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?
  23. 23. 4. Localize Script making data from PHP available in JavaScript
  24. 24. 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 "rn"; echo <script type="text/javascript"> . "rn"; echo "t" . var userid = " . esc_js( $current_user->ID ) . ";; echo "rn"; echo "t" . var fname = " . esc_js( $current_user->user_firstname ) . ";; echo "rn"; echo </script> . "rn";}?> 
  25. 25. 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 what to call what data of script to the object to send to send data to when it is the script (required) in the script (required) (required)
  26. 26. 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 its being attached to has been enqueued. It doesnt put the localized script in a queue for later queued scripts.
  27. 27. 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.
  28. 28. Example 4.1What we are doing:Send user ID and first name from PHP over tocustom.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 );}?> 
  29. 29. Example 4.1What we are doing:Send user ID and first name from PHP over tocustom.js and alert the user.<?php/** Corresponding JavaScript: https://gist.github.com/3718839 **/ in JavaScript the data can be called byadd_action( wp_enqueue_scripts, send_user_data_to_custom ); usingfunction send_user_data_to_custom() { userinfo.userid and userinfo.fname $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 );}?> 
  30. 30. Example 4.1JavaScript: custom.jsjQuery(document).ready(function($){ alert("Hey, " + userinfo.fname + ", your user ID is " + userinfo.userid + ". Boom!");});
  31. 31. questions? (thanks!)slides: http://www.slideshare.net/jeffreyzinn/wcla12-javascript code: https://gist.github.com/3718135
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×