wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Enqueue a script.


Description Description

Registers the script if $src provided (does NOT overwrite), and enqueues it.

See also See also


Top ↑

Parameters Parameters

$handle

(string) (Required) Name of the script. Should be unique.

$src

(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory.

Default value: ''

$deps

(array) (Optional) An array of registered script handles this script depends on.

Default value: array()

$ver

(string|bool|null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.

Default value: false

$in_footer

(bool) (Optional) Whether to enqueue the script before </body> instead of in the <head>. Default 'false'.

Default value: false


Top ↑

Source Source

File: wp-includes/functions.wp-scripts.php

function wp_enqueue_script( $handle, $src = '', $deps = array(), $ver = false, $in_footer = false ) {
	$wp_scripts = wp_scripts();

	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );

	if ( $src || $in_footer ) {
		$_handle = explode( '?', $handle );

		if ( $src ) {
			$wp_scripts->add( $_handle[0], $src, $deps, $ver );
		}

		if ( $in_footer ) {
			$wp_scripts->add_data( $_handle[0], 'group', 1 );
		}
	}

	$wp_scripts->enqueue( $handle );
}

Top ↑

Changelog Changelog

Changelog
Version Description
2.1.0 Introduced.

Top ↑

More Information More Information

Top ↑

Usage Usage

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Links a script file to the generated page at the right time according to the script dependencies, if the script has not been already included and if all the dependencies have been registered. You could either link a script with a handle previously registered using the wp_register_script() function, or provide this function with all the parameters necessary to link a script.

This is the recommended method of linking JavaScript to a WordPress generated page.

Top ↑

Notes Notes

  • The function should be called using the wp_enqueue_scripts action hook if you want to call it on the front-end of the site, like in the examples above. To call it on the administration screens, use the admin_enqueue_scripts action hook. For the login screen, use the login_enqueue_scripts action hook. Calling it outside of an action hook can lead to problems, see the ticket #11526 for details.
  • If you try to register or enqueue an already registered handle with different parameters, the new parameters will be ignored. Instead, use wp_deregister_script() and register the script again with the new parameters.
  • jQuery UI Effects is not included with the jquery-ui-core handle.
  • This function relies on the use of wp_head() and wp_footer() by the active theme. This means that it may not work with a few very old themes that do not call these functions. This is useful to keep in mind when debugging ancient themes.
  • Uses: WP_Scripts::add(), WP_Scripts::add_data() and WP_Scripts::enqueue().
  • Uses global: (unknown type) $wp_scripts.

Top ↑

Default Scripts Included and Registered by WordPress Default Scripts Included and Registered by WordPress

By default, WordPress installation includes many popular scripts commonly used by web developers besides the scripts used by WordPress itself. Some of them are listed in the table below.

For a detailed list of names that can be used in place of the $handle parameter, see wp_register_script().

Script Name
Handle
Needed Dependency *
Script version
License
Image Cropper Image cropper (not used in core, see jcrop)
Jcrop jcrop 0.9.12 MIT
SWFObject swfobject 2.2-20120417 MIT
SWFUpload swfupload 2201-20110113 MIT
SWFUpload Degrade swfupload-degrade 2201 MIT
SWFUpload Queue swfupload-queue 2201 MIT
SWFUpload Handlers swfupload-handlers 2201-20110524 MIT
jQuery jquery json2 (for AJAX calls) 1.12.4 MIT + (MIT OR BSD)
jQuery Form jquery-form jquery 4.2.1 MIT OR LGPLv3
jQuery Color jquery-color jquery 2.1.1 MIT+CC0 + (MIT OR GPLv2)
jQuery Masonry jquery-masonry jquery 3.1.2b MIT
Masonry (native Javascript) masonry imagesloaded 3.1.2b MIT
jQuery UI Core jquery-ui-core jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Widget jquery-ui-widget jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Accordion jquery-ui-accordion jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Autocomplete jquery-ui-autocomplete jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Button jquery-ui-button jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Datepicker jquery-ui-datepicker jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Dialog jquery-ui-dialog jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Draggable jquery-ui-draggable jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Droppable jquery-ui-droppable jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Menu jquery-ui-menu jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Mouse jquery-ui-mouse jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Position jquery-ui-position jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Progressbar jquery-ui-progressbar jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Selectable jquery-ui-selectable jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Resizable jquery-ui-resizable jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Selectmenu jquery-ui-selectmenu jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Sortable jquery-ui-sortable jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Slider jquery-ui-slider jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Spinner jquery-ui-spinner jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Tooltips jquery-ui-tooltip jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Tabs jquery-ui-tabs jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects jquery-effects-core jquery 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Blind jquery-effects-blind jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Bounce jquery-effects-bounce jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Clip jquery-effects-clip jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Drop jquery-effects-drop jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Explode jquery-effects-explode jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Fade jquery-effects-fade jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Fold jquery-effects-fold jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Highlight jquery-effects-highlight jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Pulsate jquery-effects-pulsate jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Scale jquery-effects-scale jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Shake jquery-effects-shake jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Slide jquery-effects-slide jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
jQuery UI Effects – Transfer jquery-effects-transfer jquery-effects-core 1.11.4 MIT + CC0 + (MIT OR GPLv2)
MediaElement.js (WP 3.6+) wp-mediaelement jquery 4.2.6-78496d1 MIT
jQuery Schedule schedule jquery 20m/1.0.1 MIT
jQuery Suggest suggest jquery 1.1-20110113 Public domain
ThickBox thickbox 3.1-20121105 MIT OR GPLv3
jQuery HoverIntent hoverIntent jquery 1.8.1 MIT
jQuery Hotkeys jquery-hotkeys jquery 0.2.0 MIT OR GPLv2
Simple AJAX Code-Kit sack 1.6.1 X11 License
QuickTags quicktags 1.3 LGPL2.1
Iris (Colour picker) iris jquery 1.0.7 GPLv2
Farbtastic (deprecated) farbtastic jquery 1.2 GPLv3
ColorPicker (deprecated) colorpicker jquery v2 Author’s own copyright
Tiny MCE wp-tinymce 4.9.4 LGPL2.1
Autosave autosave
WordPress AJAX Response wp-ajax-response
List Manipulation wp-lists
WP Common common
WP Editor editorremov
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
Threaded Comments comment-reply
Admin Gallery admin-gallery
Media Upload media-upload
Admin widgets admin-widgets
Word Count word-count
Theme Preview theme-preview
JSON for JS json2 2015-05-03 Public domain
Plupload Core plupload 2.1.9 GPLv2
Plupload All Runtimes plupload-all 2.1.1 GPLv2
Plupload HTML4 plupload-html4 2.1.1 GPLv2
Plupload HTML5 plupload-html5 2.1.1 GPLv2
Plupload Flash plupload-flash 2.1.1 GPLv2
Plupload Silverlight plupload-silverlight 2.1.1 GPLv2
Underscore js underscore 1.8.3 MIT
Backbone js backbone 1.2.3 MIT
imagesLoaded imagesloaded 3.2.0 MIT
CodeMirror wp-codemirror 5.29.1-alpha-ee20357 MIT
imgAreaSelect imgareaselect jquery 0.9.8 MIT AND GPL
Removed from Core
Script Name Handle Removed Version Replaced With
Scriptaculous Root scriptaculous-root WP 3.5 Google Version
Scriptaculous Builder scriptaculous-builder WP 3.5 Google Version
Scriptaculous Drag & Drop scriptaculous-dragdrop WP 3.5 Google Version
Scriptaculous Effects scriptaculous-effects WP 3.5 Google Version
Scriptaculous Slider scriptaculous-slider WP 3.5 Google Version
Scriptaculous Sound scriptaculous-sound WP 3.5 Google Version
Scriptaculous Controls scriptaculous-controls WP 3.5 Google Version
Scriptaculous scriptaculous WP 3.5 Google Version
Prototype Framework prototype WP 3.5 Google Version

The list is far from complete. For a complete list of registered files inspect $GLOBALS['wp_scripts'] in the admin UI. Registered scripts might change per requested page.


* The listed dependencies are not complete.



Top ↑

User Contributed Notes User Contributed Notes

  1. Skip to note 1 content
    Contributed by Andrija Naglic

    Never worry about cache again!

    This is a little trick I’ve picked up along the way.
    The version of the .js and .css files is made from the time of it’s last update.

    /**
     * Never worry about cache again!
     */
    function my_load_scripts($hook) {
    
    	// create my own version codes
    	$my_js_ver  = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/custom.js' ));
    	$my_css_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ));
    	
    	// 
    	wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array(), $my_js_ver );
    	wp_register_style( 'my_css', 	plugins_url( 'style.css', 	 __FILE__ ), false,   $my_css_ver );
    	wp_enqueue_style ( 'my_css' );
    
    }
    add_action('wp_enqueue_scripts', 'my_load_scripts');
    

    That way, you will always use the cached versions, except in case the files were changed in the meanwhile, which is the most optimum scenario.

  2. Skip to note 2 content
    Contributed by bcworkz

    When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode, which means you cannot use the common $ alias. You must use the full jQuery instead. Alternately, place your code using the $ shortcut inside a noConflict wrapper.

    jQuery( document ).ready( function( $ ) {
        // $() will work as an alias for jQuery() inside of this function
        [ your code goes here ]
    } );
  3. Skip to note 3 content
    Contributed by Barbara Ford

    Using a Hook

    Enqueue both scripts and styles from a single action hook.

    /**
     * Proper way to enqueue scripts and styles.
     */
    function wpdocs_theme_name_scripts() {
    	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
    
  4. Skip to note 4 content
    Contributed by Barbara Ford

    Link a Theme Script Which Depends on jQuery

    JavaScript files included in themes often require another JavaScript file to be loaded in advance to use its functions or variables. Using the $deps parameter, the wp_enqueue_script() and wp_register_script() functions allows you to mark dependencies when registering a new script. This will cause WordPress to automatically link these dependencies to the HTML page before the new script is linked. If the handles of these dependencies are not registered, WordPress will not link the new script. This example requires the jQuery library for the custom_script.js theme script:

    /**
     * Enqueue a script with jQuery as a dependency.
     */
    function wpdocs_scripts_method() {
    	wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
    
  5. Skip to note 5 content
    Contributed by Andrew Surdu

    I want to add a note to bcworkz comment. When using jquery, in general, this is how the code in a file should be formatted:

    (function( $ ) {
    
    	"use strict";
    	
    	// javascript code here. i.e.: $(document).ready( function(){} ); 
    
    })(jQuery);
    

    It’s a common practice that ensures jQuery runs in no conflict mode and in strict mode.

    Strict mode helps out in a couple ways:

    • It catches some common coding bloopers, throwing exceptions.
    • It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).
    • It disables features that are confusing or poorly thought out.
  6. Skip to note 6 content
    Contributed by Barbara Ford

    Link the script.aculo.us Library

    The following is an example of basic usage which links the script.aculo.us library already included and registered by WordPress with the scriptaculous handle.

    /**
     * Enqueue script.aculo.us.
     *
     * Tha callback is hooked to 'wp_enqueue_script' to ensure the script is only enqueued on the front-end.
     */
    function my_scripts_method() {
        wp_enqueue_script( 'scriptaculous' );
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
    

    The above example links the script.aculo.us library only on the front-end. If the library was needed within the administration screens, you could use the admin_enqueue_scripts action hook instead, however, this would enqueue it on all the administration screens, which often leads to plugin/core conflicts, ultimately breaking the WordPress administration screens experience. Instead, you should only link it on the individual screens you need it, see the Link Scripts Only on a Plugin Administration Screen section for an example of that.

  7. Skip to note 7 content
    Contributed by Pratik Shrestha

    When registering and enqueueing scripts, you don’t need to call wp_register_script() and wp_enqueue_script(). Just call wp_enqueue_script().
    This:

    wp_register_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
    wp_enqueue_script ( 'custom-script' );
    

    Should simply be:

    wp_enqueue_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
    

    Only register if you don’t know if you’re going to load it immediately.

  8. Skip to note 8 content
    Contributed by Michael Nelson

    Because of the work on https://core.trac.wordpress.org/ticket/9346, it’s actually safe to call

    wp_enqueue_script

    after the hook “wp_enqueue_scripts” and before the footer, eg when rendering shortcodes or rendering a post’s body.
    Enqueueing stylesheets (css) in this same method has some issues though.
    Scribu gave an example of a shortcode enqueueing a script here: http://scribu.net/wordpress/conditional-script-loading-revisited.html

  9. Skip to note 9 content
    Contributed by Xedin Unknown

    This is not documented, but calling this function with $in_footer being `false` actually registers the script in general as a dependency that should be resolved and output, not just for header. Then, when outputting scripts enqueued for the footer, only the scripts that have not been included yet will be output. This leads to behaviour where a script that is enqueued supposedly in the header will appear in the footer if enqueued after the header has already been process. Therefore, $in_footer should actually read and be understood as $in_footer_only.

  10. Skip to note 10 content
    Contributed by Manny Fleurmond

    Because this and wp_enqueue_style uses WP_Scripts::enqueue(), which can take an array of handles as it’s first argument, you can also pass an array of handles into wp_enqueue_script/style:

    /**
     * Enqueue multiple handles
     */
    function enqueue_multiple() {
        wp_enqueue_script( array( 'backbone', 'jquery', 'iris' ) );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_multiple' );
    
  11. Skip to note 11 content
    Contributed by cgastrell

    Unmet dependencies will *NOT* be warned

    If dependencies (3rd argument) are not met, the script tag is just not printed and no warnings nor errors are shown.

    This doesn’t seem like a bug, just expected behavior. A mention about this on the docs would suffice to prevent misunderstandings.

    This example will never load /js/example.js

    /**
     * ... enqueue plugin scripts.
     */
    function load_plugin_scripts() {
        wp_enqueue_script(
    		'script-name',
    		plugin_dir_url( __FILE__ ) . '/js/example.js',
    		array('not-existant'),
    		'1.0.0',
    		true
    	);
    }
    add_action( 'wp_enqueue_scripts', 'load_plugin_scripts' );
    
  12. Skip to note 13 content
    Contributed by damiankaelgreen

    This documentation should really do a better job defining what a “script” is… Because: is this function meant for enqueueing a .php or html script? No!

    That may seem obvious to a lot of developers, but if you are looking at this documentation, you should be getting some clarity as to what this function should be used for, so I’m writing this to help.

    Apparently, in this case, the term “script” is being used as a program that is not being evaluated by the server, but rather a program that needs to be passed to the client (and evaluated by the browser). Thus in this case, a PHP file that is expected to be evaluated by the server would not be considered a script (even though a lot of people might call it one) and thus it should not be included with wp_enqueue_script(), but included using require_once() or possibly include_once() instead.

  13. Skip to note 15 content

    This example link of custom stylesheet and script with file version version

    function custom_enqueue(){
        //wp_enqueue_style('string $handle', mixed $src, array $deps, mixed $ver, string $meida );
        wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/fatblog.css', array(), '1.0.0', 'all' );
        //wp_enqueue_style('string $handle', mixed $src, array $deps, mixed $ver, bol $in_footer );
        wp_enqueue_script('customjs', get_template_directory_uri() . '/js/fatblog.js', array(), '1.0.0', 'true' );
    }
    add_action('wp_enqueue_scripts', 'custom_enqueue');
  14. Skip to note 16 content
    Contributed by Barbara Ford

    Link a Plugin Script That Depends on script.aculo.us

    This example is intended to be used within a plugin file to register and link a new plugin script that depends on the script.aculo.us library. See the example above for information about dependencies.

    /**
     * Enqueue script with script.aculo.us as a dependency.
     */
    function my_scripts_method() {
    	wp_enqueue_script( 'newscript', plugins_url( '/js/newscript.js' , __FILE__ ), array( 'scriptaculous' ) );
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
    
  15. Skip to note 17 content
    Contributed by Barbara Ford

    Link Scripts Only on a Plugin Administration Screen

    This example links a script only on a specific administration screen, as opposed to the scenario described in the paragraph below the code of the first example.

    <?php
    /**
     * Register the plugin script.
     */
    function wpdocs_plugin_admin_init() {
        // Register our script.
        wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) );
    }
    add_action( 'admin_init', 'wpdocs_plugin_admin_init' );
    
    /**
     * Add Administration screen for the plugin.
     */
    function wpdocs_plugin_admin_menu() {
        /* Add our plugin submenu and administration screen */
        $page_hook_suffix = add_submenu_page( 'edit.php',	// The parent page of this submenu.
    		__( 'My Plugin', 'my-textdomain' ),				// The submenu title.
    		__( 'My Plugin', 'my-textdomain' ),				// The screen title.
    		'manage_options', 								// The capability required for access to this submenu.
    		'my_plugin-options', 							// The slug to use in the URL of the screen.
    		'wpdocs_plugin_manage_menu' 					// The function to call to display the screen.
    	);
    
        /*
    	 * Use the retrieved $page_hook_suffix to hook the function that links our script.
    	 * This hook invokes the function only on our plugin administration screen,
    	 * see: https://developer.wordpress.org/reference/hooks/admin_print_scripts-hook_suffix/
    	 */
        add_action( "admin_print_scripts-{$page_hook_suffix}", 'wpdocs_plugin_admin_scripts');
    }
    add_action( 'admin_menu', 'wpdocs_plugin_admin_menu' );
    
    /**
     * Enqueue registered script in the admin.
     */
    function wpdocs_plugin_admin_scripts() {
        // Link our already registered script to a page.
        wp_enqueue_script( 'my-plugin-script' );
    }
    
    /**
     * Display callback for the plugin Administration screen.
     */
    function wpdocs_plugin_manage_menu() {
        // Display our administration screen.
    }
    
  16. Skip to note 18 content
    Contributed by Miguel Torres

    Not sure if this is the place to report it, but I believe that the Tiny MCE handle that appears on the “Default Scripts Included and Registered by WordPress” table is incorrect. It says tiny_mce, but according to the code that registers the Tiny MCE scripts (https://core.trac.wordpress.org/browser/trunk/src/wp-includes/script-loader.php?rev=45138#L56-L64) should be wp-tinymce.

You must log in before being able to contribute a note or feedback.