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

2 Answers 2

Reset to default
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.

Improve this answer
3
  • moving wop_head to somewhere else destroy my theme Commented Jul 17, 2013 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. Commented Jul 18, 2013 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. Commented Jul 18, 2013 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.

Improve this answer

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.