wp_script_add_data() │ WP 4.2.0

Add metadata to a script.

Works only if the script has already been registered.

Possible values for $key and $value: 'conditional' string Comments for IE 6, lte IE 7, etc.

No Hooks.

Return

true|false. True on success, false on failure.

Usage

wp_script_add_data( $handle, $key, $value );
$handle(string) (required)
Name of the script.
$key(string) (required)
Name of data point for which we're storing a value.
$value(mixed) (required)
String containing the data to be added.

Examples

0

#1 Connect the script only for IE versions less than 9

This example shows how to add a connection condition to a registered script. For example, let's add the condition <!--[if lt IE 9]>...<![endif]--> - for IE less than 9.

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {

	// Connect special scripts only for Internet Explorer 6
	wp_enqueue_script('pngfix', get_template_directory_uri() .'js/pngfix.js');

	wp_script_add_data('pngfix', 'conditional', 'lt IE 9');
}

As a result we get in the head of the document

<!--[if lt IE 9]>
<script type='text/javascript' src='http://example.com/wp-content/themes/theme/js/pngfix.js?ver=4.5.2'></script>
<![endif]-->
0

#2 Adding async attribute to a registered script 

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
add_filter( 'script_loader_tag', 'my_script_loader_tag', 10, 2 );

function my_enqueue_scripts() {

	wp_enqueue_script( 'app', get_template_directory_uri() . 'js/app.js' );

	// add async to the registered script.
	wp_script_add_data( 'app', 'async', true );
}

function my_script_loader_tag( $tag, $handle ) {

	// add an async attribute to the registered script.
	if ( wp_scripts()->get_data( $handle, 'async' ) ) {
		$tag = str_replace( '></', ' async></', $tag );
	}

	return $tag;
}

As a result we get in the head of the document

<script type='text/javascript' src='http://example.com/wp-content/themes/theme/js/app.js?ver=4.5.2' async></script>
0

#3 Adding the defer attribute to a registered script 

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
add_filter( 'script_loader_tag', 'my_script_loader_tag', 10, 2 );

function my_enqueue_scripts() {
	wp_enqueue_script( 'app', get_template_directory_uri() . 'js/app.js' );

	// add a defer to the registered script.
	wp_script_add_data( 'app', 'defer', true );
}

function my_script_loader_tag( $tag, $handle ) {
	// add the defer attribute to the registered script.
	if ( wp_scripts()->get_data( $handle, 'defer' ) ) {
		$tag = str_replace( '></', ' defer></', $tag );
	}

	return $tag;
}

As a result we get in the head of the document

<script type='text/javascript' src='http://example.com/wp-content/themes/theme/js/app.js?ver=4.5.2' defer></script>
0

#4 Support async/defer 

add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
add_filter( 'script_loader_tag', 'filter_script_loader_tag', 10, 2 );

function twentytwenty_register_scripts() {

	wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', [], '1.0', false );

	wp_script_add_data( 'twentytwenty-js', 'async', true );
}

function filter_script_loader_tag( $tag, $handle ) {

	foreach ( array( 'async', 'defer' ) as $attr ) {

		if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
			continue;
		}

		// Prevent adding attribute when already added in #12009.
		if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
			$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
		}

		// Only allow async or defer, not both.
		break;
	}

	return $tag;
}

Notes

Changelog

Since 4.2.0 Introduced.

Code of wp_script_add_data() WP 5.9.3

wp-includes/functions.wp-scripts.php 
function wp_script_add_data( $handle, $key, $value ) {
	return wp_scripts()->add_data( $handle, $key, $value );
}

script

Scripts and Styles