WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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');
share|improve this question
    
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? – Chip Bennett Feb 15 '14 at 22:42
up vote 4 down vote accepted

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' );
share|improve this answer
    
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 Feb 15 '14 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 ); – Seamus Leahy Feb 16 '14 at 0:06
    
I'm afraid there is no good source on the $wp_scripts object. In general, you never have to touch it. – Seamus Leahy Feb 16 '14 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 Feb 16 '14 at 1:24
    
My bad, that only works for stylesheets. I'll update the answer regarding it. – Seamus Leahy Feb 16 '14 at 2:17

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.

share|improve this answer

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 );
share|improve this answer
1  
The !is_admin() check is totally unnecessary. wp_enqueue_scripts only runs front end. Back end scripts are enqueued with admin_enqueue_scripts. – Pieter Goosen Jan 13 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)... – Bryan Willis Jan 13 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 ;-) – Pieter Goosen Jan 13 at 9:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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