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.

In my WordPress blog I included a javascript-based slideshow at the top which works well. I have a PHP file which outputs the necessary javascript that has to go in the <head> tag by means of an "add_action" in my child theme's functions.php file:

function add_slideshow_js() {
include('/path/slideshow_output.php');
echo $js_output;
}
add_action( 'wp_head', 'add_slideshow_js' );

The javascript that this PHP outputs includes a call to the controlling javascript file:

<script src="path/slideshow.js" type="text/javascript"></script>

... followed by the javascript that makes the page's slideshow.

It all works very well, looks great. The thing is, it's dependent on jquery, but it was working fine, so I wondered how jquery was actually being included.

I tuned off all my plugins and it stopped working. So obviously one of them was including jquery and allowing it to work.

But I thought I'd like to make sure that jquery will be included, without relying on a plugin, since I might delete the vital plugin at some point in the future, and of course I'd still want the slideshow to work.

So, with all plugins disabled, I thought I'd include jquery explicitly myself, by writing this function in my child theme's functions.php file:

function insert_jquery(){
   wp_enqueue_script('jquery');
}
add_filter('wp_head','insert_jquery');

Now, that does include jquery, but it's called in the footer, and by experimenting I find that the slideshow will only work if jquery is called inside the <head> tag.

I could write a function to call my own jquery file, but I get the impression that it's best to use the jquery included with WordPress, and in any case, I thought that re-enabling the plugins would then get jquery called twice.

So what function can I write in my child theme's functions.php file that will reliably get the WordPress jquery loaded in the <head> section of the page?

Hope this all makes sense.

share|improve this question
add comment

3 Answers

up vote 0 down vote accepted

By default if you enqueue jquery then it gets added in header but if any plugin is changing the default behavior of it and adding it in footer instead of header then you can use the following code to alter it and force it to add in header again.

function insert_jquery(){
wp_enqueue_script('jquery', false, array(), false, false);
}
add_filter('wp_enqueue_scripts','insert_jquery',1);

For more information on wp_enqueue_script() function visit this page.

share|improve this answer
    
I find that including this exact function code in my child theme's functions.php file places jquery successfully in the <head> again and thus re-enables my slideshow. That's great, but I'm still puzzled, as you seemed to imply that its purpose was to prevent some 'rogue' plugin from placing jquery in the footer - but all my plugins are disabled. So what is it overriding? –  John Doe Aug 25 '13 at 17:36
    
It is just adding script in the header which is required for your slideshow to work but as some of your plugins were adding it in footer as there may be some functionality of those plugins which need this script in footer will not work properly. –  Vinod Dalvi Aug 25 '13 at 17:41
    
I don't see what can be forcing jquery to load in the footer when every single one of my plugins are disabled. Can they do that while they are disabled? –  John Doe Aug 25 '13 at 17:48
    
No they don't do that while disabling. Try changing theme to other theme like default twentytwelve theme and then check it. –  Vinod Dalvi Aug 25 '13 at 17:51
    
A theme change makes no difference. To summarise, with all plugins disabled, an attempt to add jquery with function insert_jquery(){ wp_enqueue_script('jquery'); } add_filter('wp_head','insert_jquery'); loads jquery in the footer, whereas using the above code instead loads it in the <head> tag as it should do. I don't understand this behaviour. –  John Doe Aug 25 '13 at 19:03
show 1 more comment

My guess is that you have a plugin that manipulating script registration so that jQuery loads in the footer. I am pretty sure it loads in the <head> by default. You can try to make your slideshow work if included in the footer or you can work out which plugin is causing the issue and try to correct that. This might work but I haven't tested it.

function insert_jquery(){
   wp_enqueue_script('jquery');
}
add_filter('wp_enqueue_scripts','insert_jquery',1);

In the bigger picture though, what you are doing is not the right way to load scripts. You should be registering and enqueueing slideshow.js and almost certainly extracting the Javascript from slideshow_output.php and registering and enqueueing, passing variables to the script via wp_localize_script. You can then make use of the $deps parameter (see the links) to ensure that everything loads in the sequence in which it needs to load.

share|improve this answer
    
I understand that I need to research and learn the "bigger picture" issues you point to, but I'm puzzled how the 'rogue' plugin can still make jquery load in the footer when all plugins have been temporarily disabled. –  John Doe Aug 25 '13 at 17:13
    
If it isn't the plugin, then it is the theme or less likely a mu-plugin. The answer by @VinodDalvi supports the idea that jQuery loads in the head by default. –  s_ha_dum Aug 25 '13 at 17:19
add comment

That's not the correct way :

function insert_jquery(){
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), '1.10.2', false );

}
add_filter('wp_enqueue_scripts','insert_jquery');

Regarding front-end, the appropriate hook is wp_enqueue_scripts. With this snippet you replace jQuery sourc with Google CDN

share|improve this answer
1  
Deregistering default jquery is not recommended. –  Vinod Dalvi Aug 25 '13 at 17:00
    
Nor is the question is about replacing jQuery. It is about getting jQuery to load in the head of the document so that a dependent script will work properly. –  s_ha_dum Aug 25 '13 at 17:02
1  
Please do not use CDN to load jQuery. Enqueue WordPress's default version instead. This makes it much easier for other plugin/theme developers and minimizes conflicts. –  splashingpixels Aug 25 '13 at 18:05
    
Oh really? Who says this? –  JMau Aug 26 '13 at 9:11
    
@s_ha_dum : true, You just need to set false as 5th parameter to load this in head section. –  JMau Aug 26 '13 at 9:39
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.