3

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.

3

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.

  • 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
0

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.

  • 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
0
function insert_jquery_in_header(){
wp_enqueue_script('jquery', false, array(), false, false);
}
add_filter('wp_enqueue_scripts','insert_jquery_in_header',1);

by default wp loads de js files in footer, so, of this way you can force it to load in header, hope it helps!

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.