Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

This is my example code placed in functions.php:

function my_init_method() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-widget', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-mouse', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-accordion', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-slider', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-tabs', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-sortable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-draggable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-droppable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-selectable', false, array('jquery'), false, false);
    //wp_enqueue_script('jquery-ui-datepicker', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-resizable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-dialog', false, array('jquery'), false, false);
    //wp_enqueue_script('jquery-ui-button', false, array('jquery'), false, false);
}
add_action('init', 'my_init_method');

Here is the reference: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Why all scripts except jQuery are loading in wp_footer() and not wp_head()? I set last parameter to false. I also tried true and I tried completely deleting parameters like: wp_enqueue_script('jquery-ui-core');. Yet, they always load in footer.

share|improve this question
    
I believe and could be wrong, but as they have been registered already, when enqueueing them with no src will trigger WP to look at the registered details rather than your item. Similarly, you should be using the wp_enqueue_scripts hook. Lastly, it's considered a best practice to load your JS in the footer for page speed. –  Cristian Jul 25 '12 at 8:57
    
any specific reason to enqueue them on head? –  Sisir Jul 25 '12 at 9:05
    
@Sisir Yes, it says $.widget doesn't exist when I load in footer. It doesn't say that when I load in head. –  Paul Jul 25 '12 at 9:15
    
@Sneek I can't load $.widget after I want to use it. I need to load it in head and use in body. Otherwise it returns error. How can I overwrite WP settings then? –  Paul Jul 25 '12 at 9:23
1  
did you tried using jQuery instead of $? The error is showing probably because your js script loading on head (before jquery or other jquery ui files). Also you should hook into wp_enqueue_scripts not into init –  Sisir Jul 25 '12 at 9:24

2 Answers 2

up vote 2 down vote accepted

All of these scripts are already registered to print in the footer. See wp-includes/script-loader.php for details. When you try to register the scripts again WordPress doesn’t change that.

The workaround would be to register a new script for wp_head with those scripts as dependencies (the third parameter of wp_enqueue_script()).

Do not register the scripts in another order before WP does it! This will affect wp-admin and probably other pages too.

But the real question is: Why do you need the scripts loaded so early? Fix that instead. My guess: You are using some inline script and don’t wait until the document is loaded. That is hardly ever necessary.

Also note that $ is not a jQuery object in WordPress. You have to use jQuery( function( $ ) { /* your code with $ here. */ }.

share|improve this answer
    
"You are using some inline script and don’t wait until the document is loaded." - I use document ready or window load everywhere but I will check that. Whenever I load jQuery Widget in footer - it breaks ($.widget not defined). If you say that I can load it in footer and still maintain my original code with document load check then I'll check all my scripts once again. Maybe I missed document ready check somewhere. Thanks! –  Paul Jul 25 '12 at 10:26
1  
@Flow See my update. You cannot use $ in the global namespace without preparation in WordPress. –  toscho Jul 25 '12 at 10:29
    
Yes, yes, I use jQuery() everywhere :) Otherwise, it breaks. Alternatively, I use this hack: $ = jQuery.noConflict();. I'll check if you were right today and let you know here by choosing it as best answer! –  Paul Jul 25 '12 at 11:03

As others have pointed out, you need to hook into wp_enqueue_scripts. You also need to enqueue the scripts before any other part of WordPress enqueues them, because wp_enqueue_script() "includes the script if it hasn't already been included". If the script would already be included, I believe you wouldn't be able to change it's position from footer to head.

So the working code could look like this:

function my_enqueue_scripts_method() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-widget', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-mouse', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-accordion', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-slider', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-tabs', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-sortable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-draggable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-droppable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-selectable', false, array('jquery'), false, false);
    //wp_enqueue_script('jquery-ui-datepicker', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-resizable', false, array('jquery'), false, false);
    wp_enqueue_script('jquery-ui-dialog', false, array('jquery'), false, false);
    //wp_enqueue_script('jquery-ui-button', false, array('jquery'), false, false);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts_method', 1);

EDIT: But as @toscho said, this just fixes your most-likely-broken way of handling your own script. This stuff should be loaded in the footer for maximum performance.

share|improve this answer

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.