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

Adds extra code to a registered script.

Contents

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.

Top ↑

See also

Top ↑

Parameters

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

Default: 'after'

Top ↑

Return

bool True on success, false on failure.

Top ↑

Source

File: wp-includes/functions.wp-scripts.php. View all references 

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 on Trac View on GitHub

Top ↑

Top ↑

Used By

Used By
Used By Description
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 9 more used by Hide more used by

Top ↑

Changelog

Changelog
Version Description
4.5.0 Introduced.

Top ↑

User Contributed Notes

  1. Skip to note 1 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 33You must log in to vote on the helpfulness of this note
    Contributed by Jules Colle —

    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"
  2. Skip to note 2 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 18You must log in to vote on the helpfulness of this note
    Contributed by Clifford Paulick —

    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/

  3. Skip to note 3 content
    You must log in to vote on the helpfulness of this noteVote results for this note: 10You must log in to vote on the helpfulness of this note
    Contributed by Pepro Dev. Group —

    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');");
  4. Skip to note 4 content
    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
    Contributed by Aurovrata Venet —

    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);
});
  5. Skip to note 5 content
    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
    Contributed by Aurovrata Venet —

    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 ) );
  6. Skip to note 6 content
    You must log in to vote on the helpfulness of this noteVote results for this note: -11You must log in to vote on the helpfulness of this note
    Contributed by dhinju —

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

You must log in before being able to contribute a note or feedback.