wp_add_inline_script() – Function | Developer.WordPress.org

Adds extra code to a registered script.

Description

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.

Parameters

$handlestringrequired: Name of the script to add the inline script to.
$datastringrequired: String containing the JavaScript to be added.
$positionstringoptional: Whether to add the inline script before the handle or after. Default 'after'.
Default:'after'

Return

bool True on success, false on failure.

Source

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 );
}

View all references View on Trac View on GitHub

Uses	Description
stripos()`wp-includes/class-pop3.php`
WP_Scripts::add_inline_script()`wp-includes/class-wp-scripts.php`	Adds extra code to a registered script.
wp_scripts()`wp-includes/functions.wp-scripts.php`	Initializes $wp_scripts if it has not been set.
__()`wp-includes/l10n.php`	Retrieves the translation of $text.
_doing_it_wrong()`wp-includes/functions.php`	Marks something as being incorrectly called.

Show 2 more Show less

Used by	Description
wp_enqueue_block_template_skip_link()`wp-includes/theme-templates.php`	Enqueues the skip-link script & styles.
wp_attach_theme_preview_middleware()`wp-includes/theme-previews.php`	Adds a middleware to `apiFetch` to set the theme for the preview.
block_editor_rest_api_preload()`wp-includes/block-editor.php`	Preloads common data used with the block editor by specifying an array of REST API paths that will be preloaded for a given block editor context.
enqueue_editor_block_styles_assets()`wp-includes/script-loader.php`	Function responsible for enqueuing the assets required for block styles functionality on the editor.
the_block_editor_meta_boxes()`wp-admin/includes/post.php`	Renders the meta boxes forms.
WP_Privacy_Policy_Content::notice()`wp-admin/includes/class-wp-privacy-policy-content.php`	Adds a notice with a link to the guide when editing the privacy policy page.
wp_enqueue_code_editor()`wp-includes/general-template.php`	Enqueues assets needed by the code editor for the given settings.
WP_Widget_Media_Gallery::enqueue_admin_scripts()`wp-includes/widgets/class-wp-widget-media-gallery.php`	Loads the required media files for the media manager and scripts for media widgets.
WP_Widget_Custom_HTML::enqueue_admin_scripts()`wp-includes/widgets/class-wp-widget-custom-html.php`	Loads the required scripts and styles for the widget control.
WP_Widget_Text::enqueue_admin_scripts()`wp-includes/widgets/class-wp-widget-text.php`	Loads the required scripts and styles for the widget control.
WP_Widget_Media_Audio::enqueue_admin_scripts()`wp-includes/widgets/class-wp-widget-media-audio.php`	Loads the required media files for the media manager and scripts for media widgets.
WP_Widget_Media_Video::enqueue_admin_scripts()`wp-includes/widgets/class-wp-widget-media-video.php`	Loads the required scripts and styles for the widget control.
WP_Widget_Media_Image::enqueue_admin_scripts()`wp-includes/widgets/class-wp-widget-media-image.php`	Loads the required media files for the media manager and scripts for media widgets.
wp_localize_jquery_ui_datepicker()`wp-includes/script-loader.php`	Localizes the jQuery UI datepicker.
WP_Customize_Widgets::enqueue_scripts()`wp-includes/class-wp-customize-widgets.php`	Enqueues scripts and styles for Customizer panel and export data to JavaScript.

Show 10 more Show less

Changelog

Version	Description
4.5.0	Introduced.

User Contributed Notes

Skip to note 7 content

Jules Colle 3 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 34You must log in to vote on the helpfulness of this note
Apparently we should now use wp_add_inline_script instead of wp_localize_script to expose a global object that needs to be used by your script.

So, while previously you could (and still can) do 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',
) );
```
It seems that it’s now recommended to do it like this (which I personally believe is a lot uglier):
```
wp_enqueue_script( 'wpdocs-my-script', 'https://url-to/my-script.js' );
wp_add_inline_script( 'wpdocs-my-script', 'const MYSCRIPT = ' . json_encode( array(
    'ajaxUrl' => admin_url( 'admin-ajax.php' ),
    'otherParam' => 'some value',
) ), 'before' );
```
Note that you need to add 'before' as the third parameter to the wp_add_inline_script function.

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&quot;
console.log( MYSCRIPT.otherParam ); // output: "some value"
```
- Feels is a lot uglier for me as well, I don’t like the idea of writing JS inside PHP which this function makes it look like something that is correct, but can actually create a lot of mess in the codebase, plus makes it harder to debug
  
  Rommel Castro 3 years ago
Log in to add feedback

Clifford Paulick 8 years ago

The following code can be used to easily add Typekit’s JavaScript to your theme:

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){}' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_typekit' );

Which results in:

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

From https://make.wordpress.org/core/2016/03/08/enhanced-script-loader-in-wordpress-4-5/

Pepro Dev. Group 3 years ago

Add CSS Style without dependency

wp_register_style( 'myprefix-dummy-css', false );
wp_enqueue_style( 'myprefix-dummy-css' );
wp_add_inline_style( 'myprefix-dummy-css', "body *{ box-sizing: inherit; }");

Add JavaScript Code without dependency

wp_register_script( 'myprefix-dummy-js-header', '',);
wp_enqueue_script( 'myprefix-dummy-js-header' );
wp_add_inline_script( 'myprefix-dummy-js-header', "console.log('loaded in header');");

Add JavaScript Code with jQuery dependency

wp_register_script( 'myprefix-dummy-js-footer', '', array("jquery"), '', true );
wp_enqueue_script( 'myprefix-dummy-js-footer'  );
wp_add_inline_script( 'myprefix-dummy-js-footer', "console.log('loaded in footer');");

Skip to note 10 content

Aurovrata Venet 2 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note
NOTE: with new block themes such as Twenty Twenty Two, wp_localize_script/wp_add_inline_script will no longer work if called too late such as in a shortcode rendering callback function. To achieve this you will need to make use of an anonymous function call hooked on wp_footer action,
```
$data=array();// your data object you want to pass to your front-end script.
$localise = json_encode($data);
add_action('wp_footer', function() use ($localise){
  printf('<script type="text/javascript">var myData = %s</script>', $localise);
});
```
Log in to add feedback
Skip to note 11 content

Aurovrata Venet 4 years ago

You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note
this is handy function when you want to make sure your anonymous function uses an object that is instantiated using a javascript library that can potentially clash with other versions loaded by other plugins or by WordPress core itself. For example, if you need to use a different version of jQuery, you can do the following,
```
wp_register_script( 'jquery3.2.1', 'https://code.jquery.com/jquery-3.2.1.min.js' );
wp_add_inline_script( 'jquery3.2.1', 'var jQuery3_2_1 = $.noConflict(true);' );
wp_enqueue_script( 'plugin-javascript', plugins_url( 'js.js', __FILE__ ), array( 'jquery3.2.1' ) );
```
this will instantiate a new jQuery object `jquery3_2_1` right after the jquery library v3.2.1 is loaded by the browser, ensuring it has the right version references, which you can then pass as an attribute the `js.js` script,
```
( function( $ ) { //$ now uses v3.2.1 of jquery.
  // Alert jQuery version.
  alert($.fn.jquery);
  // Plugin/theme code should go here.
}( jQuery3_2_1 ) );
```
Log in to add feedback

dhinju 8 years ago

-11

For adding inline script

function theme_prefix_enqueue_script() {
   wp_enqueue_script( 'main-js', '/main.js', array(), '1.0' );
   wp_add_inline_script( 'main-js', 'alert("hello world");' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );

For jQuery-dependent scripts use this:

function theme_prefix_enqueue_script() {
   if ( ! wp_script_is( 'jquery', 'done' ) ) {
     wp_enqueue_script( 'jquery' );
   }
   wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );

wp_add_inline_script( string $handle, string $data, string $position = ‘after’ ): bool

In this article