7

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.

Improve this question

4 Answers 4

Reset to default
12

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.

Improve this answer
7
  • 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
    Commented Aug 25, 2013 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
    Commented Aug 25, 2013 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
    Commented Aug 25, 2013 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
    Commented Aug 25, 2013 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
    Commented Aug 25, 2013 at 19:03
1 
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!

Improve this answer
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.

Improve this answer
2
  • 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
    Commented Aug 25, 2013 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
    Commented Aug 25, 2013 at 17:19
0

My problems stopped (Using WP 5.3.2 plus an empty theme with no external files) when I loaded a script of my own with an added dependency towards jQuery (which is enqueued by WP out of the box).

function load_assets() {
    wp_enqueue_script( 'mm-scrollfix', site_url( '/wp-content/js/mm-scrollfix-1.0.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_assets' );

That dependency seemed to, uh, awaken jQ. Note that the last "true" in the code is to load the asset before the closing body tag instead of the head; which is where wp_enqueue_scripts outputs to default.

If I load the contents of thee .js file in question using the wp_footer hook (that is even futher down the line), thus not declaring the dependency, it results in a

Uncaught ReferenceError: jQuery is not defined.

So, maybe this is something, I don't know. Propably gonna get downvotes - SO is too elegant for my shabby brains. %)

Cheers.

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.

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