wp_add_inline_script() │ WP 4.5.0

Adds extra code to a registered script.

Code will only be added if the script is already in the queue. Accepts a string $data containing the Code. If two or more code blocks are added to the same script $handle, they will be printed in the order they were added, i.e. the latter added code can redeclare the previous.

Uses: wp_scripts()
Used By: wp_localize_jquery_ui_datepicker()

No Hooks.

Return

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

Usage

wp_add_inline_script( $handle, $data, $position );
$handle(string) (required)
Name of the script to add the inline script to.
$data(string) (required)
String containing the JavaScript to be added.
$position(string)
Whether to add the inline script before the handle or after.
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.

Code of wp_add_inline_script() WP 6.0

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