wp_add_inline_script( string $handle, string $data, string $position = 'after' )
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.
See also
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 value: 'after'
Return
(bool) True on success, false on failure.
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>' ) ) {
_doing_it_wrong(
__FUNCTION__,
sprintf(
/* translators: 1: <script>, 2: wp_add_inline_script() */
__( 'Do not pass %1$s tags to %2$s.' ),
'<code><script></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 );
}
Expand full source code Collapse full source code View on Trac View on GitHub
Changelog
| Version | Description |
|---|---|
| 4.5.0 | Introduced. |
User Contributed Notes
You must log in before being able to contribute a note or feedback.
Apparently we should now use
wp_add_inline_scriptinstead ofwp_localize_scriptto 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 thewp_add_inline_scriptfunction.Now, in your JS script you can access these PHP parameters like this:
Top ↑
Feedback
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 — By Rommel Castro —
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/
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');");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,
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 ) );NOTE: with new block themes such as Twenty Twenty Two,
wp_localize_script/wp_add_inline_scriptwill 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); });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' );