29

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?

Improve this question

3 Answers 3

Reset to default
46

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

Improve this answer
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.
    – Marcio Duarte
    Commented Sep 1, 2018 at 21:52
  • 2
    We're good to go as of WP 5.0.
    – Dave Romsey
    Commented Jan 23, 2019 at 2:22
  • 1
    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
    Commented Feb 20, 2019 at 19:10
  • Unluckily I have to stick with Version 4.9.x.
    – Lucas Vendramini
    Commented Dec 3, 2019 at 18:06
12

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.

Improve this answer
6

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 
} );
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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