0

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');
1
  • What have you done to debug? What other hooks have you tried? Do any of the scripts get enqueued, or none of them? Can we see the rendered output? Commented Feb 15, 2014 at 22:42

3 Answers 3

6

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' );
5
  • Thanks for this. Two things: (1) WordPress is adding jquery AFTER bootstrap.min.js is there a way to remedy this? (2) Is there somewhere online I can read about the $wp_scripts object? The Class Reference page is in poor repair.
    – Wilhelm
    Commented Feb 15, 2014 at 23:57
  • You can use, the dependency parameter. It tells WordPress what scripts are needed before it. wp_enqueue_script( "bootstrap", get_template_directory_uri()."/js/bootstrap.min.js", array( 'my-jquery' ), '3', true ); Commented Feb 16, 2014 at 0:06
  • I'm afraid there is no good source on the $wp_scripts object. In general, you never have to touch it. Commented Feb 16, 2014 at 0:07
  • Thanks Seamus. I noticed that html5-shiv and respond.js are being displayed in the HTML without being commented out w/IE conditionals? Am I missing something?
    – Wilhelm
    Commented Feb 16, 2014 at 1:24
  • My bad, that only works for stylesheets. I'll update the answer regarding it. Commented Feb 16, 2014 at 2:17
0

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.

0

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 );
3
  • 1
    The !is_admin() check is totally unnecessary. wp_enqueue_scripts only runs front end. Back end scripts are enqueued with admin_enqueue_scripts. Commented Jan 13, 2016 at 7:26
  • That is correct. I used to never use that, but recently I've seen it being used all over the place, #45440, #55930 and assumed I had overlooked something. I'm guessing people saw examples using is_admin() hooked into init, and just assumed it applied (or maybe it has changed over the years)... Commented Jan 13, 2016 at 8:34
  • Jip, I'm not pretty sure where this comes from, but wp_head() can only ever run on the front end, so anything hooked to it like wp_enqueue_scripts can only ever run on the front end. Checking for admin on anything hooked to wp_head is as irritating and useless as the function_exists() checks on core functions. You cannot deactivate core and still use your theme ;-) Commented Jan 13, 2016 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.