I’m trying to load two JS files. But some how its not working. Tried both of these, and the console window doesn’t complain of unable to load the file, it never was in the head.
Also, I’m having a weird issue (not sure if related) that CSS file would not be loaded if not specified explicitly in the header. However, if specified, it would be loaded twice.
version 1
add_action( 'after_setup_theme', 'theme_initialization' );
function theme_initialization() {
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
}
function enqueue_scripts() {
$template_dir = get_template_directory_uri();
wp_enqueue_script( 'xxxx', $template_dir . '/js/xxxx.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'xxxx', $template_dir . '/js/xxxx.js', array( 'jquery' ), '1.0', true );
}
version 2
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
function enqueue_scripts() {
$template_dir = get_template_directory_uri();
wp_enqueue_script( 'xxxx', $template_dir . '/js/xxxx.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'xxxx', $template_dir . '/js/xxxx.js', array( 'jquery' ), '1.0', true );
}
Whenever building a theme, you should always add wp_footer(); in the footer.php right before the closing body tag to ensure all JS files that are loaded at the footer can be loaded.