Why does wp_enqueue_script ignore my 'wp_head' hook? - wordpress

Question

I would like css_head_scripts and js_head_scripts to be appended to wp-head
but Wordpress completely ignores it? Am I missing something?
function css_head_scripts() {
wp_enqueue_style( 'Master Stylesheet', get_template_directory_uri()."style.css" );
}
function js_head_scripts() {
echo '<!--[if lt IE 9]>';
wp_enqueue_script( "HTML5 Shiv", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" );
wp_enqueue_script( "Respond.js", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" );
echo '<![endif]-->';
}
function js_footer_scripts() {
wp_enqueue_script( "My jQuery", "http://code.jquery.com/jquery-1.10.2.min.js" );
wp_enqueue_script( "Bootstrap", get_template_directory_uri()."/js/bootstrap.min.js" );
}
add_action('wp_head', 'css_head_scripts');
add_action('wp_head', 'js_head_scripts');
add_action('wp_footer', 'js_footer_scripts');

Answer 1

There are a number of issues with the code you've posted.
1) These shouldn't be hooked to wp_head or wp_footer.
The correct hook is wp_enqueue_scripts.
Change:
add_action('wp_head', 'css_head_scripts');
add_action('wp_head', 'js_head_scripts');
add_action('wp_footer', 'js_footer_scripts');
To:
add_action('wp_enqueue_scripts', 'css_head_scripts');
add_action('wp_enqueue_scripts', 'js_head_scripts');
add_action('wp_enqueue_scripts', 'js_footer_scripts');
2) Your handles should be lowercase and shouldn't contain spaces.
For example change:
function css_head_scripts() {
wp_enqueue_style( 'Master Stylesheet', get_template_directory_uri()."style.css" );
}
To:
function css_head_scripts() {
wp_enqueue_style( 'master-stylesheet', get_template_directory_uri()."style.css" );
}
3) A different function can be used for the main stylesheet.
function css_head_scripts() {
wp_enqueue_style( 'master-stylesheet', get_stylesheet_uri() );
}
4) You shouldn't be enqueuing a custom version of jQuery.
Remove wp_enqueue_script( "My jQuery", "http://code.jquery.com/jquery-1.10.2.min.js" );
5) The correct way to load a script in the footer
Change:
function js_footer_scripts() {
wp_enqueue_script( "bootstrap", get_template_directory_uri() . "/js/bootstrap.min.js" );
}
To:
function js_footer_scripts() {
wp_enqueue_script( "bootstrap", get_template_directory_uri() . "/js/bootstrap.min.js", array( 'jquery' ), false, true );
}
6) The correct way to add IE conditionals.
function js_head_scripts() {
global $wp_scripts;
wp_register_script( "html5-shiv", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js", array(), '3.7.0' );
$wp_scripts->add_data( 'html5-shiv', 'conditional', 'lt IE 9' );
wp_enqueue_script( "respond.js", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js", array(), '1.4.2' );
$wp_scripts->add_data( 'respond.js', 'conditional', 'lt IE 9' );
}
7) Do you need 3 functions for this?
Combine all of this into a single function
If you've been following along so far your completed code should look something like this:
function wpse_scripts_styles() {
global $wp_scripts;
wp_enqueue_style( 'master-stylesheet', get_stylesheet_uri() );
wp_enqueue_script( "bootstrap", get_template_directory_uri() . "/js/bootstrap.min.js", array( 'jquery' ), false, true );
wp_register_script( "html5-shiv", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js", array(), '3.7.0' );
$wp_scripts->add_data( 'html5-shiv', 'conditional', 'lt IE 9' );
wp_register_script( "respond.js", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js", array(), '1.4.2' );
$wp_scripts->add_data( 'respond.js', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'wpse_scripts_styles' );
Further reading: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
UPDATE:
Disappointingly the IE conditional doesn't work.
https://core.trac.wordpress.org/ticket/16024
A work around for this would be to load them in the head with the wp_head action but this isn't ideal. Following on from the example above the method you'd use is:
function wpse_ie_conditional_scripts() { ?>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php
}
add_action( 'wp_head', 'wpse_ie_conditional_scripts' );