php - WordPress Move jQuery to footer but scripts depending on it are loaded before it
Get the solution ↓↓↓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');
}
Answer
Solution:
// 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);
Answer
Solution:
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.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: script cache:clear returned with error code 255
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.