How to load the WordPress jquery in the <head> section

2 Views

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:

Read More
<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.

Post Views: 2

Related posts

4 comments

  1. 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.

  2. 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!

  3. 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.

  4. 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.

Comments are closed.