JavaScript in WordPress (OCWP March 2012)

1,024 views

Published on

Short presentation on how to include and remove JavaScript files from your themes and plugins as well as pushing PHP variables into your JavaScript files.

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

No Downloads
Views
Total views
1,024
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript in WordPress (OCWP March 2012)

  1. 1. Weaving JavaScript -- in and out of -- WordPressOrange County WordPress Developer’s Meetup March 2012
  2. 2. Topics• Register and Enqueue Scripts• Available JavaScript Libraries• Tap into available CDNs• Localize Script
  3. 3. 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
  4. 4. wp_register_script()Description:Safe way of registring javascripts in WordPressfor later use with wp_enqueue_script().Usage:<?php  wp_register_script ( $handle, $src, $deps, $ver, $in_footer ); ?>
  5. 5. 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 Generally on functions.php, but could be elsewhere in your theme or plugin code.
  6. 6. Example 1What are we even doing:Load a custom javascript called custom.js frommy theme’s /js folder into the theme. load me
  7. 7. Example 1What are we even doing:Load a custom javascript called custom.js frommy 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 );}?> 
  8. 8. 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 );}?> 
  9. 9. 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
  10. 10. 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 );}?> 
  11. 11. 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 );}?> 
  12. 12. 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 );}?>  Keep handle the same for dependencies
  13. 13. 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 ); Be careful of version # $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 );}?> 
  14. 14. wp_localize_script()Description:Send PHP data into the JavaScript data world.Usage:<?php  wp_localize_script ( $handle, $object_name, $l10n ); ?>
  15. 15. 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 );}?> 
  16. 16. Example 5What are we even doing: fname’ => $first_name  ); $data = array( user_id => $uid,Prepare wp_localize_script( custom-script, user_info, $data ); PHP variables for use in custom.js.<?php <script type=”text/javascript”>/** JavaScripts **/add_action( wp_enqueue_scripts, custom_enqueue_scripts );function custom_enqueue_scripts() { $src = get_stylesheet_directory_uri() . /js/custom.js ;alert(“Hey, “ + user_info.fname);  wp_register_script( custom-script, $src, array(jquery), 1, TRUE ); wp_enqueue_script( custom-script );</script> $data = array( gravatar => $gravatar, user_id => $uid  ); wp_localize_script( custom-script, user_info, $data );}?> 
  17. 17. <?php  Example 6/** JavaScripts **/add_action( wp_enqueue_scripts, custom_enqueue_scripts );function custom_enqueue_scripts() { // Load jQuery from Google APIs 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 ); // 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;}?> 
  18. 18. Questions?

×