WCLV13 JavaScript

1,427 views

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 Las Vegas 2013

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,427
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WCLV13 JavaScript

  1. 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. 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. 3. Need To Know 1. JavaScript 2. Functions 3. Actions Friday, December 13, 13
  4. 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
  5. 5. 1. Loading Javascript making JavaScripts available to themes, plugins and code Friday, December 13, 13
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. (works with styles too) • wp_register_style() • wp_deregister_style() • wp_enqueue_style() • wp_dequeue_style() Friday, December 13, 13
  18. 18. 2. Available Libraries JavaScripts that are already available in a default WordPress installation Friday, December 13, 13
  19. 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. 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. 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. 22. 3. Using CDNs load JavaScripts from non-local sources Friday, December 13, 13
  23. 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. 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. 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?
  26. 26. 4. Localize Script making data from PHP available in JavaScript Friday, December 13, 13
  27. 27. Do Not... ...use PHP to build JavaScript code <?php add_action( 'wp_head', 'build_my_script' ); function build_my_script() { global $current_user; get_currentuserinfo(); echo echo "rn"; '<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"; } ?>  Friday, December 13, 13
  28. 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. 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. 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. 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. 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
  33. 33. Example 4.1 JavaScript: custom.js jQuery(document).ready(function($){ alert("Hey, " + userinfo.fname + ", your user ID is " + userinfo.userid + ". Boom!"); }); Friday, December 13, 13
  34. 34. questions? (thanks!) WordCamp Las Vegas 2013 slides: http://www.slideshare.net/jeffreyzinn/wclv13-javascript code: https://gist.github.com/jeffreyzinn/7953881 Friday, December 13, 13

×