Wordpress - wp enqueue inline script due to dependancies
Well, you have wp_localize_script(), but that's only for passing data.
Otherwise, you can do this:
function print_my_inline_script() {
if ( wp_script_is( 'some-script-handle', 'done' ) ) {
?>
<script type="text/javascript">
// js code goes here
</script>
<?php
}
}
add_action( 'wp_footer', 'print_my_inline_script' );
The idea is that you shouldn't rely on your inline script being printed exactly after the script it depends on, but later.
Just don't make it an inline script and then pass the dynamic parameters to it as variables. Otto has written a great guide on how to do this effectively.
WordPress 3.3 will also make this more powerful: https://core.trac.wordpress.org/ticket/11520
This solution is similar to @scribu's answer, but it follows the form of wp_enquque_script()
, and will place the script in the header if its dependencies are included in the header.
/**
* Enqueue inline Javascript. @see wp_enqueue_script().
*
* KNOWN BUG: Inline scripts cannot be enqueued before
* any inline scripts it depends on, (unless they are
* placed in header, and the dependant in footer).
*
* @param string $handle Identifying name for script
* @param string $src The JavaScript code
* @param array $deps (optional) Array of script names on which this script depends
* @param bool $in_footer (optional) Whether to enqueue the script before </head> or before </body>
*
* @return null
*/
function enqueue_inline_script( $handle, $js, $deps = array(), $in_footer = false ){
// Callback for printing inline script.
$cb = function()use( $handle, $js ){
// Ensure script is only included once.
if( wp_script_is( $handle, 'done' ) )
return;
// Print script & mark it as included.
echo "<script type=\"text/javascript\" id=\"js-$handle\">\n$js\n</script>\n";
global $wp_scripts;
$wp_scripts->done[] = $handle;
};
// (`wp_print_scripts` is called in header and footer, but $cb has re-inclusion protection.)
$hook = $in_footer ? 'wp_print_footer_scripts' : 'wp_print_scripts';
// If no dependencies, simply hook into header or footer.
if( empty($deps)){
add_action( $hook, $cb );
return;
}
// Delay printing script until all dependencies have been included.
$cb_maybe = function()use( $deps, $in_footer, $cb, &$cb_maybe ){
foreach( $deps as &$dep ){
if( !wp_script_is( $dep, 'done' ) ){
// Dependencies not included in head, try again in footer.
if( ! $in_footer ){
add_action( 'wp_print_footer_scripts', $cb_maybe, 11 );
}
else{
// Dependencies were not included in `wp_head` or `wp_footer`.
}
return;
}
}
call_user_func( $cb );
};
add_action( $hook, $cb_maybe, 0 );
}
// Usage
enqueue_inline_script('test','alert(\'enqueue inline script test\');',array( 'jquery'));
Note: this uses use of anonymous functions, but for PHP versions prior to 5.3 this can be easily converted to a class.