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_script
instead ofwp_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:
It seems that it’s now recommended to do it like this (which I personally believe is a lot uglier):
Note that you need to add
'before'
as the third parameter to thewp_add_inline_script
function.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:
Which results in:
From https://make.wordpress.org/core/2016/03/08/enhanced-script-loader-in-wordpress-4-5/
Add CSS Style without dependency
Add JavaScript Code without dependency
Add JavaScript Code with jQuery dependency
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,
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,For adding inline script
For jQuery-dependent scripts use this: