JavaScript in WordPress (OCWP March 2012)

  • 551 views
Uploaded 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.

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.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
551
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Weaving JavaScript -- in and out of -- WordPressOrange County WordPress Developer’s Meetup March 2012
  • 2. Topics• Register and Enqueue Scripts• Available JavaScript Libraries• Tap into available CDNs• Localize Script
  • 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. 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. 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. Example 1What are we even doing:Load a custom javascript called custom.js frommy theme’s /js folder into the theme. load me
  • 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. 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. 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. 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. 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. 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. 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. wp_localize_script()Description:Send PHP data into the JavaScript data world.Usage:<?php  wp_localize_script ( $handle, $object_name, $l10n ); ?>
  • 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. 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. <?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. Questions?