Enqueue inline JS at the WordPress footer hook

WooCommerce has a handy function you might like to include in your toolbag even when that plugin isn't in play: wc_enqueue_js(). It takes a string of JS code, wraps it in jQuery, outputs it in the footer of your site, and runs it when the DOMContentLoaded event fires. Neat? I guess!

Sometimes you just want a little bit of code without any dependencies to run on a given page without all the hubbub involved in putting it in a separate file and enqueuing it in the usual way. You could drop a script tag in the markup, but perhaps it's better still to wait until later for the sake of efficiency. No reason to add potentially render-blocking code midway down the page.

Consider this bit of placeholder JS in some page template code:

$js = <<<JS
	$('input.variation_id').change(function () {
		if ($(this).val() !== '') {
			console.log('Variation selected:', $(this).val());
		}
	});
JS;

wc_enqueue_js($js);

wc_enqueue_js() will wrap that up as follows, though not formatted as cleanly, and enqueue it to run at the wp_footer hook.

jQuery(function ($) {
	$('input.variation_id').change(function () {
		if ($(this).val() !== '') {
			console.log('Variation selected:', $(this).val());
		}
	});
});

If you'd like to use this "tech" without running WooCommerce, you'll need to copy two function definitions and add a hook yourself. If you don't feel like renaming them, reformatting them, and/or stashing them in some class of yours, it's wise to function_exists() them just in case. I've removed some comments for aesthetic purposes below.

if ( ! function_exists( 'wc_enqueue_js' ) ) :

function wc_enqueue_js( $code ) {
	global $wc_queued_js;

	if ( empty( $wc_queued_js ) ) {
		$wc_queued_js = '';
	}

	$wc_queued_js .= "\n" . $code . "\n";
}

endif;

if ( ! function_exists( 'wc_print_js' ) ) :

function wc_print_js() {
	global $wc_queued_js;

	if ( ! empty( $wc_queued_js ) ) {
		// Sanitize.
		$wc_queued_js = wp_check_invalid_utf8( $wc_queued_js );
		$wc_queued_js = preg_replace( '/&#(x)?0*(?(1)27|39);?/i', "'", $wc_queued_js );
		$wc_queued_js = str_replace( "\r", '', $wc_queued_js );

		$js = "<script type=\"text/javascript\">\njQuery(function($) { $wc_queued_js });\n</script>\n";

		echo apply_filters( 'wc_queued_js', $js );

		unset( $wc_queued_js );
	}
}

endif;

add_action( 'wp_footer', 'wc_print_js', 25 );

Of course, there's nothing stopping you from cutting out the middleman. Instead of copying in and calling wc_enqueue_js, you could send your JS to the footer hook directly with an anonymous function. You lose a couple features, namely sanitation and filtering, but if you don't need those then I guess all that matters is whichever method you think is the most visually pleasing.

add_action('wp_footer', function () {
?>

<script>
jQuery(function ($) {
	$('input.variation_id').change(function () {
		if ($(this).val() !== '') {
			console.log('Variation selected:', $(this).val());
		}
	});
});
</script>

<?php
}, 25);