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.

No Hooks.


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


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.
Whether to add the inline script before the handle or after.
Default: 'after'



#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.


#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>

#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 type='text/javascript' src='http://example.com/wp-content/themes/mytheme/my_scripts.js'></script>

#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";



Since 4.5.0 Introduced.

wp_add_inline_script() code WP 6.1.1

function wp_add_inline_script( $handle, $data, $position = 'after' ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );

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

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