wp_register_script_module() │ WP 6.5.0

Registers a JavaScript module (ES Module) in WordPress so you can later enqueue it on pages by ID.

After registration, the module can be enqueued separately (for example, conditionally — only on the pages you need), and WordPress uses the module identifier when generating the import map.

Registration does not output the script on the page — use the function wp_enqueue_script_module() for output.

No Hooks.

Returns

null. Returns nothing (the function only registers the module).

Usage

wp_register_script_module( $id, $src, $deps, $version, $args );

$id(string) (required)

Unique module identifier that will be used for the import map and for further enqueuing.

The module identifier must be unique because it is used as the key when working with the module.

$src(string) (required)

URL of the module (or path relative to the WordPress root), from which the module file will be loaded.

$deps(array)

List of dependencies.

Default: array()

• ...$0(string|array)
  An array of module script identifiers that are dependencies of this script module.

  Dependencies can be strings or arrays. If they are arrays, they must contain the key id with the script module identifier and may contain the key import with the value static or dynamic.

  • id(string)
    Script module identifier.

  • import(string)
    Optional. Import type. Can be:

    • static - means “normal” dependency that the module uses as part of its main import graph (i.e., it is needed right away so the module can execute correctly).
      By default, WordPress treats dependencies as static, including the case where the dependency is provided as a plain string in the $deps array (without an array with id/import keys).

    • dynamic - means the dependency is assumed for a dynamic import (via import()), i.e., it may be needed not at startup, but later — when the code decides to load it.​
      Inside WordPress, this affects how dependencies are collected for different “import types” (static, dynamic, or both) when building the final structure of connected modules.​

    Example:

    $deps = [ 'myplugin/vendor' ];
    
    $deps = [
    	[ 'id'  => 'myplugin/vendor', 'import' => 'dynamic' ],
    ];

    Default: static

$version(string|false|null)

A string specifying the script version number. It is added to the URL as a query string for cache invalidation in the browser.

• false — current WordPress version.
• null — the version is not added.

Default: false

$args(array)

An array of additional args.

Default: []

• in_footer(true|false)
  Whether to print the module script in the footer. Relevant only for block themes.
  Default: 'false'

• fetchpriority(auto|low|high)
  Sampling priority.
  Default: 'auto'

Examples

add_action( 'init', 'my_register_modules' );
add_action( 'wp_enqueue_scripts', 'my_enqueue_modules' );

function my_register_modules() {
	$src = plugins_url( 'assets/js/app.js', __FILE__ );

	wp_register_script_module( 'my_plugin_app', $src, [], '1.0.0', [ 'in_footer' => true ] );
}

function my_enqueue_modules() {
	wp_enqueue_script_module( 'my_plugin_app' );
}

add_action( 'init', 'my_register_admin_modules' );
add_action( 'admin_enqueue_scripts', 'my_enqueue_admin_modules' );

function my_register_admin_modules() {
	wp_register_script_module(
		'my_plugin_admin',
		plugins_url( 'assets/js/admin.js', __FILE__ ),
		[ 'myplugin/app' ],
		'1.0.0',
		[ 'in_footer' => true ]
	);
}

function my_enqueue_admin_modules() {
	wp_enqueue_script_module( 'my_plugin_admin' );
}

Add Your Own Example