If you are going to add a inline script that depends on jQuery, the best and correct way is to use wp_enqeue_scripts action hook, or wp_footer, depends on the situation, combined with wp_script_is() function:
add_action( 'wp_footer', 'cyb_print_inline_script' );
function cyb_print_inline_script() {
//Check that jQuery has been printed
if ( wp_script_is( 'jquery', 'done' ) ) {
?>
<script>
// js code goes here
</script>
<?php
}
}
But you can end up with issues because you are not managing depdencies correctly. The really correct way is to not print inline scripts that has dependencies. Instead, enqueue it in a file.
add_action( 'wp_enqueue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
wp_enqueue_script(
//Name to handle your script
'my-script-handle',
//URL to the script file
get_stylesheet_directory_uri() . '/my-script.js',
//Set the dependencies
array( 'jquery' ),
//Version
'1.0',
//In footer: true to print the script in footer, false to print it on head
true
);
}
If you need to pass variables to your script, use wp_localize_script as follow:
add_action( 'wp_enqeue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
//Register the js file
wp_register_script(
//Name to handle your script
'my-script-handle',
//URL to the script file
get_stylesheet_directory_uri() . '/my-script.js',
//Set the dependencies
array( 'jquery' ),
//Version
'1.0',
//In footer: true to print the script in footer, false to print it on head
true
);
//Localize the needed variables
$script_vars = array(
'some_var' => 'some value',
'another_var' => 'another value'
);
wp_localize_script( 'my-script-handle', 'object_name_passed_to_script', $script_vars );
//Enqueue the script
wp_enqueue_script('my-script-handle');
}