wp_options_connectors_wp_admin_enqueue_scripts()wp-includes/build/pages/options-connectors/page-wp-admin.php | Enqueue scripts and styles for the options-connectors-wp-admin page.
|
wp_options_connectors_render_page()wp-includes/build/pages/options-connectors/page.php | Render the options-connectors page.
|
wp_font_library_render_page()wp-includes/build/pages/font-library/page.php | Render the font-library page.
|
wp_font_library_wp_admin_enqueue_scripts()wp-includes/build/pages/font-library/page-wp-admin.php | Enqueue scripts and styles for the font-library-wp-admin page.
|
wp_enqueue_command_palette_assets()wp-includes/script-loader.php | Enqueues the assets required for the Command Palette.
|
_wp_get_iframed_editor_assets()wp-includes/block-editor.php | Collect the block editor assets that need to be loaded into the editor’s iframe.
|
wp_maybe_enqueue_oembed_host_js()wp-includes/embed.php | Enqueue the wp-embed script if the provided oEmbed HTML contains a post embed.
|
wp_enqueue_editor_format_library_assets()wp-includes/script-loader.php | Enqueues the assets required for the format library within the block editor.
|
WP_Block::render()wp-includes/class-wp-block.php | Generates the render output for the block.
|
wp_enqueue_editor_block_directory_assets()wp-includes/script-loader.php | Enqueues the assets required for the block directory within the block editor.
|
enqueue_editor_block_styles_assets()wp-includes/script-loader.php | Function responsible for enqueuing the assets required for block styles functionality on the editor.
|
wp_enqueue_registered_block_scripts_and_styles()wp-includes/script-loader.php | Enqueues registered block scripts and styles, depending on current rendered context (only enqueuing editor scripts while in context of the editor).
|
the_block_editor_meta_boxes()wp-admin/includes/post.php | Renders the meta boxes forms.
|
register_and_do_post_meta_boxes()wp-admin/includes/meta-boxes.php | Registers the default post meta boxes, and runs the do_meta_boxes actions.
|
WP_Privacy_Policy_Content::notice()wp-admin/includes/class-wp-privacy-policy-content.php | Adds a notice with a link to the guide when editing the privacy policy page.
|
wp_enqueue_code_editor()wp-includes/general-template.php | Enqueues assets needed by the code editor for the given settings.
|
WP_Widget_Media_Gallery::enqueue_admin_scripts()wp-includes/widgets/class-wp-widget-media-gallery.php | Loads the required media files for the media manager and scripts for media widgets.
|
WP_Widget_Custom_HTML::enqueue_admin_scripts()wp-includes/widgets/class-wp-widget-custom-html.php | Loads the required scripts and styles for the widget control.
|
WP_Widget_Text::enqueue_admin_scripts()wp-includes/widgets/class-wp-widget-text.php | Loads the required scripts and styles for the widget control.
|
WP_Widget_Media_Audio::enqueue_admin_scripts()wp-includes/widgets/class-wp-widget-media-audio.php | Loads the required media files for the media manager and scripts for media widgets.
|
WP_Widget_Media_Audio::enqueue_preview_scripts()wp-includes/widgets/class-wp-widget-media-audio.php | Enqueue preview scripts.
|
WP_Widget_Media_Video::enqueue_preview_scripts()wp-includes/widgets/class-wp-widget-media-video.php | Enqueue preview scripts.
|
WP_Widget_Media_Video::enqueue_admin_scripts()wp-includes/widgets/class-wp-widget-media-video.php | Loads the required scripts and styles for the widget control.
|
WP_Widget_Media::enqueue_admin_scripts()wp-includes/widgets/class-wp-widget-media.php | Loads the required scripts and styles for the widget control.
|
WP_Widget_Media_Image::enqueue_admin_scripts()wp-includes/widgets/class-wp-widget-media-image.php | Loads the required media files for the media manager and scripts for media widgets.
|
the_custom_header_markup()wp-includes/theme.php | Prints the markup for a custom header.
|
WP_Customize_Selective_Refresh::enqueue_preview_scripts()wp-includes/customize/class-wp-customize-selective-refresh.php | Enqueues preview scripts.
|
WP_Customize_Cropped_Image_Control::enqueue()wp-includes/customize/class-wp-customize-cropped-image-control.php | Enqueue control related scripts/styles.
|
WP_Customize_Nav_Menus::customize_preview_enqueue_deps()wp-includes/class-wp-customize-nav-menus.php | Enqueues scripts for the Customizer preview.
|
WP_Customize_Nav_Menus::enqueue_scripts()wp-includes/class-wp-customize-nav-menus.php | Enqueues scripts and styles for Customizer pane.
|
wp_dashboard_setup()wp-admin/includes/dashboard.php | Registers dashboard widgets.
|
WP_Internal_Pointers::enqueue_scripts()wp-admin/includes/class-wp-internal-pointers.php | Initializes the new feature pointers.
|
do_accordion_sections()wp-admin/includes/template.php | Meta Box Accordion Template Function.
|
wp_media_upload_handler()wp-admin/includes/media.php | Handles the process of uploading media.
|
media_upload_gallery()wp-admin/includes/media.php | Retrieves the legacy media uploader form in an iframe.
|
enqueue_comment_hotkeys_js()wp-admin/includes/comment.php | Enqueues comment shortcuts jQuery script.
|
Custom_Image_Header::js_includes()wp-admin/includes/class-custom-image-header.php | Sets up the enqueue for the JavaScript files.
|
Custom_Background::admin_load()wp-admin/includes/class-custom-background.php | Sets up the enqueue for the CSS & JavaScript files.
|
WP_Customize_Manager::enqueue_control_scripts()wp-includes/class-wp-customize-manager.php | Enqueues scripts for customize controls.
|
WP_Customize_Manager::customize_preview_init()wp-includes/class-wp-customize-manager.php | Prints JavaScript settings.
|
add_thickbox()wp-includes/general-template.php | Enqueues the default ThickBox js and css.
|
wp_auth_check_load()wp-includes/functions.php | Loads the auth check for monitoring whether the user is still logged in.
|
WP_Admin_Bar::initialize()wp-includes/class-wp-admin-bar.php | Initializes the admin bar.
|
wp_enqueue_media()wp-includes/media.php | Enqueues all scripts, styles, settings, and templates necessary to use all media JS APIs.
|
wp_video_shortcode()wp-includes/media.php | Builds the Video shortcode output.
|
wp_playlist_scripts()wp-includes/media.php | Outputs and enqueues default scripts and styles for playlists.
|
wp_audio_shortcode()wp-includes/media.php | Builds the Audio shortcode output.
|
WP_Customize_Header_Image_Control::enqueue()wp-includes/customize/class-wp-customize-header-image-control.php | Enqueues control related scripts/styles.
|
WP_Customize_Color_Control::enqueue()wp-includes/customize/class-wp-customize-color-control.php | Enqueue scripts/styles for the color picker.
|
WP_Customize_Widgets::enqueue_scripts()wp-includes/class-wp-customize-widgets.php | Enqueues scripts and styles for Customizer panel and export data to JavaScript.
|
WP_Customize_Widgets::customize_preview_enqueue()wp-includes/class-wp-customize-widgets.php | Enqueues scripts for the Customizer preview.
|
_WP_Editors::enqueue_scripts()wp-includes/class-wp-editor.php | |
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.
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.
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 fulljQueryinstead. Alternately, place your code using the$shortcut inside a noConflict wrapper.Using a Hook
Enqueue both scripts and styles from a single action hook.
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:
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:
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:
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.
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.
When registering and enqueueing scripts, you don’t need to call
wp_register_script()andwp_enqueue_script(). Just callwp_enqueue_script().This:
Should simply be:
Only register if you don’t know if you’re going to load it immediately.
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.jsBecause of the work on https://core.trac.wordpress.org/ticket/9346, it’s actually safe to call
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
An example of how to enqueue multiple styles and scripts which include the SRI (sub-resource integrity) tag. This is loosely based on this article, but I’ve tried to simplify the code somewhat, particularly given I may want to include and manage many scripts/styles.
The important thing to note, is the handle specified when enqueuing a style/script, needs to match the handle referenced in the
my_add_srifunction. Also note, aside from the obvious SRI tag difference, thestr_replacemethod used on scripts in themy_add_srifunction, is different to that used on styles.This is not documented, but calling this function with
$in_footerbeing `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_footershould actually read and be understood as$in_footer_only.Because this and
wp_enqueue_styleusesWP_Scripts::enqueue(), which can take an array of handles as it’s first argument, you can also pass an array of handles intowp_enqueue_script/style:This example is using the new technique of defer or async a script. Also one good practice for versioning of the file is to use the filemtime php native function in order to pass the last modified time of the file as a parameter to the cache.
For who have the same question of @damiankaelgreen:
In this case script is the file called in one HTML tag script which is used to define a client-side script (JavaScript).
For include PHP files, please use get_template_part().
In some cases, you might want to add scripts as a module. In that case
type="module"needs to be added to the tag. This can be done using the script_loader_tag filter hook.Modules are a newer feature of JS introduced in ES6 and has many advantages over conventional JS files especially if you are working on a large project. You can read about modules in official documentation.
wp_enqueue_script_module()function. No tag filtering needed! Do note thatwp_enqueue_script_module()requires a slightly different dependency array structure, so it’s not merely a rename-and-done operation.Clearing confusion between all three functions. wp_enqueue_script() , wp_register_script() , and wp_localize_script()
wp_register_script()::
Registers a script with WordPress.
Does not load the script on the page.
Useful when you want to define a script for later use with specific conditions or dependencies.
Takes arguments like script handle (unique identifier), script path (URL or relative path to the file), and optional arguments like version number and dependencies on other scripts.
wp_enqueue_script()::
Enqueues a script that need to be loaded on the page.
Can also register the script if it hasn’t been registered before.
Useful for including scripts you need on a specific page or based on certain conditions (e.g., only on the front-end).
Takes arguments like script handle (same as used with wp_register_script) and optional arguments like version number, dependencies, and placement (in the header or footer).
Here’s a key difference:
wp_enqueue_script can handle both registering and loading a script in one call.
wp_register_script only registers the script for later use with wp_enqueue_script or another function that might need it.
wp_localize_script()::
Does not register or enqueue a script.
Used to localize a registered script, meaning it injects PHP variables into the script as JavaScript objects.
Useful for passing data from WordPress (PHP) to your JavaScript code.
Takes arguments like script handle (of an already registered script), a variable name to hold the data in JavaScript, and the actual PHP data (array or object) you want to pass.
In short,
Use wp_register_script to define scripts for later use.
Use wp_enqueue_script to load scripts on the page (can also register if needed).
Use wp_localize_script to pass data from PHP to your registered JavaScript code.
See Also:
wp_enqueue_style
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.
This example link of custom stylesheet and script with file version version
The required CSS for
jquery-ui-dialogdoes not come automatically!You must separately call
wp_enqueue_style()with the registered handle “wp-jquery-ui-dialog”.Replace a parent theme JS (or CSS) entirely:
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.
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.
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 bewp-tinymce.When enqueuing a custom script file that you later want to add some inline JS to using wp_add_inline_script() . It’s always best that you have the custom script enqueuing in the footer by setting the last parameter in the function to
truewp_enqueue_script( $handle, $src, $deps, $ver,
true);The list of libraries seems to be incomplete. For example `lodash`, `react` exists in WordPress vendor scripts but not list in this page, and there are more.
To see full list, go to wp-includes/script-loader.php page.
The $deps parameter may also be null, you don’t have to pass an empty array. See the _WP_Dependency class constructor in
wp-includes/class-wp-dependency.phpThe action hook used for loading scripts (wp_enqueue_scripts) is called in the head section of the document, so in order for the script to be loaded on the page, you MUST include the following on your page template:
This is inaccurate. This code fetches the header.php file. What must actually be included in the template is:
The confusion here is that most header files contain the
wp_head();hook.This is the place to report it. I’ve updated the table with your changes. Thanks!