wp_add_inline_script() │ WP 4.5.0

Adds additional JavaScript code to the registered script.

JS is added directly to the HTML document, after the main (specified) script. It can be specified to be before the script.

The script code is specified in the parameter $data. If multiple scripts are added to one handler (name), they will be output in the order of their addition, in a single <script> block.

The function should be used after the main script has been added to the output queue, but has not yet been displayed on the screen. That is, if the script has been added and already displayed on the screen, using the function will output nothing.

An analogous function for styles: wp_add_inline_style()

Uses: wp_scripts()
Used By: wp_localize_jquery_ui_datepicker()

No Hooks.

Returns

true|false. True if the script code was successfully added, false otherwise.

Usage

wp_add_inline_script( $handle, $data, $position );
$handle(string) (required)
The name (ID) of the script to which the additional script block will be added.
$data(string) (required)
JS code as a string. The opening/closing <script> is added automatically.
$position(string)
Where to add the code: before (before) or after (after) the specified script in $handle.
Default: 'after'

Examples

1

#1 Passing data from PHP to JS

Suppose we need to specify ajax URL for our script and some additional parameters. It can be done like this:

wp_enqueue_script( 'my-script', 'https://url-to/my-script.js' );

$json = json_encode( [
	'ajaxUrl' => admin_url( 'admin-ajax.php' ),
	'param1' => 'some value',
	'param2' => 'value 2',
] );

wp_add_inline_script( 'my-script', "const MYSCRIPT = $json", 'before' );

Note that you need to add 'before' as the third parameter.

Now, in your JS script you can access these PHP parameters like this:

console.log( MYSCRIPT.ajaxUrl ); // output: "https://your-site/wp-admin/admin-ajax.php"
console.log( MYSCRIPT.otherParam ); // output: "some value"

Apparently we should use wp_add_inline_script() instead of wp_localize_script() to expose a global object that needs to be used by your script.

The example above shows how we can do it. For example, if we do that with wp_localize_script() it would looks like this:

wp_enqueue_script( 'wpdocs-my-script', 'https://url-to/my-script.js' );

wp_localize_script( 'wpdocs-my-script', 'MYSCRIPT', array(
	'ajaxUrl' => admin_url( 'admin-ajax.php' ),
	'otherParam' => 'some value',
) );

But it is bad practice, because wp_localize_script() turns numbers to string type: for example int 5 becomes string "5". And because wp_localize_script() should uses for localize.

0

#2 Demonstration of work

Insert the JS code after the JS file:

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_typekit' );

function mytheme_enqueue_typekit(){

	wp_enqueue_script( 'mytheme-typekit', 'https://use.typekit.net/.js', array(), '1.0' );

	wp_add_inline_script( 'mytheme-typekit', 'try{ Typekit.load({ async: true }); }catch(e){} ' );

}

/* Get the HTML code
<script type="text/javascript" src="https://use.typekit.net/.js?ver=1.0"></script>
<script type="text/javascript"> try{ Typekit.load({ async: true }); }catch(e){} </script>
*/
0

#3 Custom JS code before the file

Suppose we already have a script file my_scripts.js with identifier my_scripts. And we need to add some arbitrary code to it. For example, we need to specify global variables for it: color1 and color2:

add_action( 'wp_enqueue_scripts', function(){

	wp_enqueue_script( 'my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' );

	// add custom code
	wp_add_inline_script( 'my_scripts', 'var color1 = "red"; var color2 = "blue";', 'before' );
} );

/* Get the HTML code
<script type='text/javascript'>
var color1 = "red"; var color2 = "blue";
</script>
<script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script>
*/
0

#4 Multiple calls wp_add_inline_script() 

add_action('wp_enqueue_scripts', function(){
	wp_enqueue_script('my_scripts', get_stylesheet_directory_uri() .'/my_scripts.js' );

	// add custom code
	wp_add_inline_script( 'my_scripts', 'var color1 = "red"; var color2 = "blue";' );
	wp_add_inline_script( 'my_scripts', 'var color3 = "#fff"; var color3 = "#000";' );
} );

/* Get the HTML code
<script type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script>
<script type='text/javascript'>
var color1 = "red"; var color2 = "blue";
var color3 = "#fff"; var color3 = "#000";
</script>
*/

Notes

Changelog

Since 4.5.0 Introduced.

wp_add_inline_script() code WP 6.8.1

wp-includes/functions.wp-scripts.php 
function wp_add_inline_script( $handle, $data, $position = 'after' ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );

	if ( false !== stripos( $data, '</script>' ) ) {
		_doing_it_wrong(
			__FUNCTION__,
			sprintf(
				/* translators: 1: <script>, 2: wp_add_inline_script() */
				__( 'Do not pass %1$s tags to %2$s.' ),
				'<code>&lt;script&gt;</code>',
				'<code>wp_add_inline_script()</code>'
			),
			'4.5.0'
		);
		$data = trim( preg_replace( '#<script[^>]*>(.*)</script>#is', '$1', $data ) );
	}

	return wp_scripts()->add_inline_script( $handle, $data, $position );
}

script

Scripts and Styles