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.

How to force jquery to load as a first script in header?

Right now it's the last ;( like:

<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.min.js"></script>




<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

and I want them to be in this order:

<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>




<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.min.js"></script>

And my head looks like this:

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

<?php wp_enqueue_script("jquery"); ?>

<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />


<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.6.0/jquery.selectBoxIt.min.js"></script>

<?php wp_head(); ?>

</head>
share|improve this question
2  
Show your code, pls. How are you including JS files in your theme? –  Krzysiek Dróżdż Jul 17 '13 at 18:04
    
@KrzysiekDróżdż I have updated my question with the code. –  Derfder Jul 17 '13 at 19:04
add comment

2 Answers

up vote 2 down vote accepted

All JS that is properly enqueued will be added to your header at the very point where you, or the theme designer, respectively, included wp_head().

Ideally, you should also enqueue your custom script(s) the same way and make them dependent on jQuery - WP will then naturally load them after.

If however you want to (as I assume your are doing now) include JS manually in the header, then do so simply after wp_head(), if the JS depends on jQuery.

share|improve this answer
    
moving wop_head to somewhere else destroy my theme –  Derfder Jul 17 '13 at 19:06
    
Why hook to wp_head? The whole dependencies logic is assuming you are hooked to wp_enqueue_scripts? I don't see any upside in using wp_head instead of doing it the right way. –  JPollock Jul 18 '13 at 2:40
    
@JPollock: Granted, a hook called wp_head does exist. But I never recommended using it. When you hook into wp_enqueue_scripts - where in the theme do you think scripts will be included? --> Where the wp_head() or wp_footer() template tags (note the brackets after the function name) have been put... --> Try using wp_enqueue_script() while removing wp_head() from your header.php - you will realize that does not work. –  Johannes Pille Jul 18 '13 at 8:24
add comment

You need to set the dependencies variable of wp_enqueue_script() to include jQuery, jQuery UI core and which ever other parts of jQuery UI you need. you should not add them via external CDNs. For reliability and compatibility's sake use WordPress' built-in libraries if possible. If a library is not built-in, add it to your theme directory.

Also you should not be adding any scripts or styles to header.php. Use a function hooked to the wp_enqueue_scripts action in functions.php to do so.

You can see the list of libraries that are built into and automatically registered by WordPress, and their handles at:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress

EDIT: I can't recommend this article more for understanding how to add scripts to themes the right way.

share|improve this answer
add comment

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.