21

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.com/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?

29

wp_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.9 5.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'.

4
  • The wp_add_inline_script() without dependency is still being considered for 4.9.9, it doesn't necessarily mean that it will be added. So it's wise to wait for confirmation before using this feature. Sep 1 '18 at 21:52
  • 1
    We're good to go as of WP 5.0. Jan 23 '19 at 2:22
  • Someone deleted my comment from here (I confirmed birgire's answere that it actually works in WP 5.0+), and a month later I actually needed this code again, googled, found this answer, swept at a glance, not finding my comment, and moved on to other results. Just after an hour, I came back here, realizing that this was the answer I was looking for! To moderator: please DO NOT delete my useful comments, they serve ME as well as future references and reminders, not just for others. Thank you.
    – dev101
    Feb 20 '19 at 19:10
  • Unluckily I have to stick with Version 4.9.x. Dec 3 '19 at 18:06
8

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.