
Scripts in your Word Press projects Published on March 17, 2010
Enviar artigo por e-mail:
Inserting scripts in your Word Press projects the proper way.
Sometimes you need to to enhance you WP project capabilities (plugins, themes, widgets, whatever), and to do so you need to add some scripts to your WP projects, either your own scripts or someone else’s. There are several ways to do this, and most of them are wrong.
This is a post excerpted from the Word Press Codex explaining how to do it.
Also there is a list with the default script libraries included with your Word Press installation, that you don’t need to include, just call whenever you need!
Cool ah!?
Function Reference/wp enqueue script
Description
A safe way of adding javascripts to a WordPress generated page.
Usage
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Parameters
- $handle
- (string) (required) Name of the script. Lowercase string.
- Default: None
- $src
- (string) (optional) URL to the script. Example: “http://example.com/wp-includes/js/scriptaculous/scriptaculous.js“. This parameter is only required when WordPress does not already know about this script.
- Default: None
- $deps
- (array) (optional) Array of handles of any script that this script depends on; scripts that must be loaded before this script. false if there are no dependencies. This parameter is only required when WordPress does not already know about this script.
- Default: array()
- $ver
- (string) (optional) String specifying the script version number, if it has one. Defaults to false. This parameter is used to ensure that the correct version is sent to the client regardless of caching, and so should be included if a version number is available and makes sense for the script.
- Default: false
- $in_footer
- (boolean) (optional) Normally scripts are placed in the <head> section. If this parameter is true the script is placed at the bottom of the <body>. This requires the theme to have the wp_footer() hook in the appropriate place. (New in WordPress 2.8)
- Default: false
Example
Load a default WordPress script from a non-default location
Suppose you want to use the CDN copy of jQuery instead of WordPress’s:
<?php
function my_init_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery'
, 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
}
add_action('init', 'my_init_method');
?>
Load the scriptaculous script
<?php
function my_init_method() {
wp_enqueue_script('scriptaculous');
}
add_action('init', 'my_init_method');
?>
Load script depends on scriptaculous
Add and load a new script that depends on scriptaculous (this will also cause it to load scriptaculous into the page as well):
<?php
wp_enqueue_script('newscript',
WP_PLUGIN_URL . '/someplugin/js/newscript.js',
array('scriptaculous'),
'1.0' );
?>
Load scripts only on plugin pages
<?php
/*
* This example will work at least on WordPress 2.6.3,
* but maybe on older versions too.
*/
add_action('admin_init', 'my_plugin_admin_init');
add_action('admin_menu', 'my_plugin_admin_menu');
function my_plugin_admin_init()
{
/* Register our script. */
wp_register_script('myPluginScript', WP_PLUGIN_URL . '/myPlugin/script.js');
}
function my_plugin_admin_menu()
{
/* Register our plugin page */
$page = add_submenu_page( 'edit.php',
__('My Plugin', 'myPlugin'),
__('My Plugin', 'myPlugin'), 9, __FILE__,
'my_plugin_manage_menu');
/* Using registered $page handle to hook script load */
add_action('admin_print_scripts-' . $page, 'my_plugin_admin_styles');
}
function my_plugin_admin_styles()
{
/*
* It will be called only on your plugin admin page, enqueue our script here
*/
wp_enqueue_script('myPluginScript');
}
function my_plugin_manage_menu()
{
/* Output our admin page */
}
?>
Note: This function will not work if it is called from a wp_head action, as the <script> tags are output before wp_head runs. Instead, call wp_enqueue_script from an init action function (to load it in all pages), template_redirect (to load it in public pages only), or admin_print_scripts (for admin pages only). Do not use wp_print_scripts (see here for an explanation).
jQuery noConflict wrappers
Note: The jQuery library included with WordPress loads in “no conflict” mode. This is to prevent compatibility problems with other javascript libraries that WordPress can load.
In order to use the default jQuery shortcut of $, you can use the following wrapper around your code:
jQuery(document).ready(function($) {
// $() will work as an alias for jQuery() inside of this function
});
That wrapper will cause your code to be executed when the page finishes loading, and the $ will work for calling jQuery. If, for some reason, you want your code to execute immediately (instead of waiting for the DOM ready event), then you can use this wrapper method instead:
(function($) {
// $() will work as an alias for jQuery() inside of this function
})(jQuery);
Default scripts included with WordPress
| Script Name | Handle |
|---|---|
| Scriptaculous Root | scriptaculous-root |
| Scriptaculous Builder | scriptaculous-builder |
| Scriptaculous Drag & Drop | scriptaculous-dragdrop |
| Scriptaculous Effects | scriptaculous-effects |
| Scriptaculous Slider | scriptaculous-slider |
| Scriptaculous Sound | scriptaculous-sound |
| Scriptaculous Controls | scriptaculous-controls |
| Scriptaculous | scriptaculous |
| Image Cropper | cropper |
| SWFUpload | swfupload |
| SWFUpload Degarade | swfupload-degrade |
| SWFUpload Queue | swfupload-queue |
| SWFUpload Handlers | swfupload-handlers |
| jQuery | jquery |
| jQuery Form | jquery-form |
| jQuery Color | jquery-color |
| jQuery UI Core | jquery-ui-core |
| jQuery UI Tabs | jquery-ui-tabs |
| jQuery UI Sortable | jquery-ui-sortable |
| jQuery UI Draggable | jquery-ui-draggable |
| jQuery UI Droppable | jquery-ui-droppable |
| jQuery UI Selectable | jquery-ui-selectable |
| jQuery UI Resizable | jquery-ui-resizable |
| jQuery UI Dialog | jquery-ui-dialog |
| jQuery Interface | interface |
| jQuery Schedule | schedule |
| jQuery Suggest | suggest |
| ThickBox | thickbox |
| jQuery Hotkeys | jquery-hotkeys |
| Simple AJAX Code-Kit | sack |
| QuickTags | quicktags |
| ColorPicker | colorpicker |
| Tiny MCE | tiny_mce |
| Prototype Framework | prototype |
| Autosave | autosave |
| WordPress AJAX Response | wp-ajax-response |
| List Manipulation | wp-lists |
| WP Common | common |
| WP Editor | editor |
| WP Editor Functions | editor-functions |
| AJAX Cat | ajaxcat |
| Admin Categories | admin-categories |
| Admin Tags | admin-tags |
| Admin custom fields | admin-custom-fields |
| Password Strength Meter | password-strength-meter |
| Admin Comments | admin-comments |
| Admin Users | admin-users |
| Admin Forms | admin-forms |
| XFN | xfn |
| Upload | upload |
| PostBox | postbox |
| Slug | slug |
| Post | post |
| Page | page |
| Link | link |
| Comment | comment |
| Admin Gallery | admin-gallery |
| Media Upload | media-upload |
| Admin widgets | admin-widgets |
| Word Count | word-count |
| WP Gears | wp-gears |
| Theme Preview | theme-preview |
2 comments on “Scripts in your Word Press projects”
Go ahead! Leave your comment on this subject!
[...] this article: Scripts in your Word Press projects | Web Design & Development … Tags: [...]
Good stuff.
You loaded jquery from Google CDN, I approve!
Why not scriptaculous as well? I’m no pro, but it seemed logical to me, unless there’s a difference between grabbing js local v. php from google.
Thanks!
PS – I’m totally going to forget to come back here for the answer. Any chance you could add a subscribe to comments option? Or send me the answer at the email attached? THANKS!