wp_script_add_data()
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
#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]-->
#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>
#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>
#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 script add data WP 5.9.3
function wp_script_add_data( $handle, $key, $value ) { return wp_scripts()->add_data( $handle, $key, $value ); }