Why does wp_enqueue_script ignore my ‘wp_head’ hook?

The 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');

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

You problem lies with how you are using wp_enqueue_script(). It does not print out the <script src=""></script>, instead it adds it to a list of Javascript files to printed out at the appropriate time.

There is a different hook that is called for when you should add your Javascript and CSS: wp_enqueue_scripts (you use it for CSS too). Your css_head_script() is called too late as the function to print the scripts is called earlier in the wp_head hook.

As for the js_head_scripts(), this will just not as you expect regardless because wp_enqueue_script() does not print the script element. It just adds it the list of scripts to print out. The best you’ll get is conditional tags with nothing inside them.

Regarding your js_footer_scripts(), you don’t need an extra function for that because wp_enqueue_script() has a parameter for adding the script to the footer instead of the head.

function add_js_and_css() {
  global $wp_scripts;

  // CSS
  // The label should be safe for an ID, and you need the trailing slash
  wp_enqueue_style( 'master-stylesheet', get_template_directory_uri()."/style.css" );

  // Javascript
  // By setting the fifth parameter to true, WP will print it in the footer
  wp_enqueue_script( "my-jquery", "http://code.jquery.com/jquery-1.10.2.min.js", array(), '1.10.2', true );
  wp_enqueue_script( "bootstrap", get_template_directory_uri()."/js/bootstrap.min.js", array('my-jquery'), '3', true );

}
add_action( 'wp_enqueue_scripts', 'add_js_and_css' );

function add_conditional_js() {
  ?>
  <!--[if lt IE 9]
    <script src="<?php echo esc_attr('https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js'); ?>"></script>
    <script src="<?php echo esc_attr('https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js'); ?>"></script>
  <![endif]-->
  <?php 

}
add_action( 'wp_head', 'add_conditional_js' );

Method 2

Try wp_enqueue_scripts hook instead wp_head to enqueue scripts and styles.

Check if there’s a wp_head() call in header.php

See codex for adding conditional comments.

Method 3

While the accepted answer works, I thought I’d add the up to date way on how this should be done.

add_action('wp_enqueue_scripts', 'wpse_134784_enqueue_html5shiv_respond_bootstrap');
/**
 * Enqueue Theme Scripts and Styles
 *
 * @link https://gist.github.com/bryanwillis/7fd5356a9d18d0c7815f
 */
function wpse_134784_enqueue_html5shiv_respond_bootstrap()  {

    // Theme Stylesheet
    wp_enqueue_style( 'master-stylesheet', get_stylesheet_uri() );

    // Local jQuery
    wp_enqueue_script( 'jquery' );

    wp_enqueue_script( 'bootstrap',
        get_template_directory_uri().'/js/bootstrap.min.js',
        array('jquery'),
        '3.3.6',
        true
    );
    wp_enqueue_script( 'html5shiv',
        'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',
        array('bootstrap'),
        false,
        false
    );
    wp_enqueue_script( 'respond',
        'https://oss.maxcdn.com/respond/1.4.2/respond.min.js',
        array('bootstrap'),
        false,
        false
    );

    // Conditional comments
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
    wp_script_add_data( 'respond', 'conditional', 'lt IE 9' );

}

If you want to use the jquery cdn you’d use this instead of the above local jquery although you might want to consider an approach with a local fallback.

wp_enqueue_script( 'my-jquery', 'http://code.jquery.com/jquery-1.10.2.min.js', false, false, true );


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment