WordPress Move jQuery to footer but scripts depending on it are loaded before it

user_573927 0
Viewed 1242

I would like to move jQuery to the footer for loading performance from my theme. I used the following code:

add_action('wp_enqueue_scripts', 'jquery_footer', 1);
function jquery_footer()
{
    if (!is_admin())
    {
        $wp_scripts = wp_scripts();
        $wp_scripts->add_data('jquery', 'group', 1);
        $wp_scripts->add_data('jquery-core', 'group', 1);
        $wp_scripts->add_data('jquery-migrate', 'group', 1);
    }
}

This did indeed move jQuery script load to footer (group 1). However, it is loaded below some other elements in the footer expecting jQuery to be already loaded. So, my footer area looks something like:

    <!--wp_footer begin-->
        <script type="text/javascript">
            (function( $, window, document, undefined ) {
                if( jQuery('.widgetopts-placeholder-e').length > 0 ){
                }
            })( jQuery, window, document );
        </script>
...
<script type='text/javascript' src='http://wp.localhost/wp/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='http://wp.localhost/wp/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

The embedded JavaScript, in this case, is from the popular Elementor plugin, and there seems to be no hooks available to change this.

Is there any way I can force my loading (enqueing) of jQuery to the very top of the wp_footer loading section?

Edit:

I also tried the following (deregister and re-register) with basically the same results:

add_action('wp_enqueue_scripts', 'jquery_footer', 1);
function jquery_footer()
{
    wp_deregister_script('jquery');

    $file = includes_url() . '/js/jquery/jquery.js';

    wp_register_script('jquery', $file, array(), '1.12.4-wp', true);
    wp_enqueue_script('jquery');
}
wordpress php jquery
2 Answers

Use wp_enqueue_script to enqueue your script and pass jquery as an argument. This will cause jquery to be included in the header.

// false parameter is optional and also default to false
wp_enqueue_script("my-script", "path-to-script.js", ["jquery"], null, false);

Another alternative is to deregister jquery and reregister it again:

wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'path/to/jquery.js', [], null, false);
user_67703050

I found a way for this to work. But it goes against the recommended practice of enqueueing your scripts instead of instead of including the directly.

In functions.php, deregister the default jQuery enqueue:

add_action('wp_enqueue_scripts', 'jquery_footer');
function jquery_footer()
{
    wp_deregister_script('jquery');
}

Then in my theme footer file, right before calling wp_footer, include:

<script type='text/javascript' src='http://wp.localhost/wp/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='http://wp.localhost/wp/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
    <!--wp_footer begin-->
<?php wp_footer(); ?>
    <!--wp_footer end-->

It works, but not ideal. So, I would like to see better solutions, if possible.

user_5739270
Related