WCLA12 JavaScript
0 likes863 views
The document outlines how to manage JavaScript within WordPress themes and plugins, focusing on loading, registering, and localizing scripts. It includes examples of using functions like wp_enqueue_script and wp_localize_script, as well as details about available libraries and loading scripts from CDNs. Additionally, it emphasizes best practices for including JavaScript without directly adding script tags in templates.
WCLA12 JavaScript
- 1. Weaving JavaScript -- in and out of -- WordPress WordCamp Los Angeles 2012 slides: http://www.slideshare.net/jeffreyzinn/wcla12-javascript code: https://gist.github.com/3718135
- 2. Jeffrey Zinn • Co-founder of Pixel Jar • WordCamp OC co-organizer • AdSanity co-developer • @jeffreyzinn • [email protected] surfer, WordPress fanboy, avid backpacker, euro gamer, soccer hooligan, traveler, voracious coffee drinker
- 3. 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 non- local sources 4. Localize Script - making data from PHP available in JavaScript
- 4. 1. Loading Javascript making JavaScripts available to themes, plugins and code
- 5. Example 1 What we are doing: Load a custom JavaScript called custom.js from my theme’s /js directory. load me
- 6. 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/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. 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>'; } ?>
- 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. 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.
- 10. 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 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. 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.
- 12. 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' ); } ?>
- 13. 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' ); } ?>
- 14. 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' ); } ?>
- 15. 2. Available Libraries JavaScripts that are already available in a default WordPress installation
- 16. Available Libraries Script Handle Scriptaculous Root scriptaculous-root 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 64 other scripts http://codex.wordpress.org/Function_Reference/ wp_enqueue_script#Default_scripts_included_with_WordPress
- 17. Example 2.1 What 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. 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' ); } ?>
- 19. 3. Using CDNs load JavaScripts from non-local sources
- 20. 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.7.2/jquery.min.js'; wp_register_script( 'jquery', $src, array(), '1.7.2' ); wp_enqueue_script( 'jquery' ); } ?>
- 21. 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.7.2/jquery.min.js'; wp_register_script( 'jquery', $src, array(), '1.7.2' ); wp_enqueue_script( 'jquery' ); } ?> Keep same handle for dependencies
- 22. 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.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. 4. Localize Script making data from PHP available in JavaScript
- 24. 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 "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. 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. 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.
- 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. 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 ); } ?>
- 29. 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 **/ in JavaScript the data can be called by add_action( 'wp_enqueue_scripts', 'send_user_data_to_custom' ); using function 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. Example 4.1 JavaScript: custom.js jQuery(document).ready(function($){ alert("Hey, " + userinfo.fname + ", your user ID is " + userinfo.userid + ". Boom!"); });
- 31. questions? (thanks!) slides: http://www.slideshare.net/jeffreyzinn/wcla12-javascript code: https://gist.github.com/3718135