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

Adds extra code to a registered script.

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

See also See also

Top ↑

Parameters Parameters


(string) (Required) Name of the script to add the inline script to.


(string) (Required) String containing the JavaScript to be added.


(string) (Optional) Whether to add the inline script before the handle or after.

Default value: 'after'

Top ↑

Return Return

(bool) True on success, false on failure.

Top ↑

Source Source

File: 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>' ) ) {
				/* 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 );

Top ↑

Changelog Changelog

Version Description
4.5.0 Introduced.

Top ↑

User Contributed Notes User Contributed Notes

  1. Skip to note 1 content
    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>
    <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/

  2. Skip to note 2 content
    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"
    console.log( MYSCRIPT.otherParam ); // output: "some value"
  3. Skip to note 3 content
    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.
      // Plugin/theme code should go here.
    }( jQuery3_2_1 ) );
  4. Skip to note 4 content
    Contributed by Pepro Dev

    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');");
  5. Skip to note 5 content
    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.