wp_script_add_data() │ WP 4.2.0

Adds data to scripts enqueued with wp_enqueue_script(). For example, when you need to output a script only for "IE 6" or "lt IE 9" (less than IE 9).

Works only if the script has already been registered or added to the queue for output - see wp_register_script() or wp_enqueue_script().

Currently, you can only specify additional data for the script for the specified browsers. That is, $key can only be conditional, and $value can be "IE 6", "lte IE 7", etc.

There is a similar function for styles: wp_style_add_data()

Use wp_localize_script() when you need to add additional data (JS object with data) before the enqueued script.

No Hooks.

Returns

true|false. True if the data was added. false on failure.

Usage

wp_script_add_data( $handle, $key, $value );
$handle(string) (required)
ID, name of the script to which data needs to be added. Here you need to specify the first parameter from wp_enqueue_script() or from wp_register_script().
$key(string) (required)

Name of the type of data being added. Based on this parameter, the value specified in $value will be processed. Can be:

  • conditional
  • data - used in wp_localize_script().
  • group - in which group to output (in the header or in the footer).
  • strategy - script loading strategy. Can be: async or defer. Since WP 6.3. Read more here.
$value(mixed) (required)

Value for the specified key $key.

Additional data for outputting the script to the screen. Possible values when $key = 'conditional':

  • IE - only for IE
  • IE 6 - only for IE 6
  • IE 7 - only for IE 7
  • IE 8 - only for IE 8
  • IE 9 - only for IE 9
  • gt IE 6 - only for IE greater than 6
  • lt IE 9 - only for IE less than 9
  • gte IE 7 - only for IE greater than or equal to 7
  • lte IE 7 - only for IE less than or equal to 7
  • !IE - for all browsers except IE versions 5-9
  • !IE - for all browsers except IE versions 5-9

Possible values when $key = 'strategy':

  • async - asynchronous loading of the script.
  • defer - deferred loading of the script.

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 the async, defer attribute to a registered script 

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {

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

	// Добавляем defer к зарегистрированному скрипту.
	wp_script_add_data( 'app', 'defer', true );
}

add_filter( 'script_loader_tag', 'support_async_defer_script_attrs', 10, 2 );

/**
 * Example of adding async|defer attribute for the script:
 *
 *     ```
 *     wp_register_script( $handle, ... )
 *
 *     // add async attribute
 *     wp_script_add_data( $handle, 'async', true );
 *
 *     // or add defer attribute
 *     wp_script_add_data( $handle, 'defer', true );
 *
 *     // unset the attr
 *     wp_script_add_data( $handle, 'async', false );
 *     ```
 */
function support_async_defer_script_attrs( $tag, $handle ) {

	foreach ( [ 'async', 'defer' ] as $attr ) {

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

		// Prevent adding attribute twice.
		if ( ! preg_match( ":\s{$attr}[=>\s]:", $tag ) ) {
			$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
		}

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

	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

#3 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.
Since 6.9.0 Updated possible values to remove reference to 'conditional' and add 'strategy'.

wp_script_add_data() code WP 6.9.1

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