I have a javascript snippet that I want to inject into the footer of the page. It's a tracking code, let's say similar to Google analytics. It has no dependencies, it's a standalone snippet.
I can do something like this
function render_tracking_code(){
wp_enqueue_script( 'depends-js', '.js', array(), '0.01', true );
wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );
Seems a little stupid (dummy.js is a blank file), but works. Is there a way to skip the dependency?
I have a javascript snippet that I want to inject into the footer of the page. It's a tracking code, let's say similar to Google analytics. It has no dependencies, it's a standalone snippet.
I can do something like this
function render_tracking_code(){
wp_enqueue_script( 'depends-js', 'https://rdiv/dummy.js', array(), '0.01', true );
wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );
Seems a little stupid (dummy.js is a blank file), but works. Is there a way to skip the dependency?
Share Improve this question asked Mar 23, 2018 at 21:45 jimlongojimlongo 3931 gold badge3 silver badges7 bronze badges3 Answers
Reset to default 46wp_add_inline_style() - without dependency
The wp_add_inline_style() can be used without a source file dependency.
Here's an example from @Flix:
wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );
where we would hook this into the wp_enqueue_scripts action.
wp_add_inline_script() - without dependency
According to ticket #43565, similar will be supported for wp_add_inline_script() in version 4.9.95.0 (thanks to @MarcioDuarte, @dev101 and @DaveRomsey for the verification in comments):
wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );
that will display the following in the header, i.e.between the <head>...</head> tags:
<script type='text/javascript'>
console.log( "header" );
</script>
To display it in the footer:
wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer' );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );
The default of $position input argument in wp_add_inline_script() is 'after'. The 'before' value prints it above 'after'.
Update: WordPress added support for adding inline scripts and styles without a dependency in v5.0. See @birgire's answer for implementations.
When using wp_add_inline_script(), WP_Scripts::print_inline_script() will ultimately be used to output inline scripts. By design, print_inline_script() requires a valid dependency, $handle.
Since there is no dependency in this case, wp_add_inline_script() is not the right tool for the job. Instead of creating a fake dependency file (and undesirable additional HTTP request), use wp_head or wp_footer to output the inline script:
add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
echo '<script>' . PHP_EOL;
// aWholeBunchOfJavascriptCode
echo '</script>' . PHP_EOL;
}
Generally, JavaScript should be added to a .js file and enqueued using wp_enqueue_script() on the wp_enqueue_scripts hook. Data can be made available to the script using wp_localize_script(). Sometimes it may still be necessary to add a script inline though.
One way to do this is to create a function that echoes your script inside a <script> tag, and hook it to the wp_print_footer_scripts action. You should take care to escape anything that you don't strictly control, but this a generally safe and easy method otherwise.
For example:
add_action( 'wp_print_footer_scripts', function () {
?>
<script>
(function myFunction() {
/* your code here */
})();
</script>
<?php
} );