1

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>
2
  • 2
    Show your code, pls. How are you including JS files in your theme? Jul 17 '13 at 18:04
  • @KrzysiekDróżdż I have updated my question with the code.
    – Derfder
    Jul 17 '13 at 19:04
2

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.

3
  • 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. Jul 18 '13 at 8:24
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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