0

I am trying to move my javascript to the footer, however when moving jQuery, it breaks a slideshow.

I am using the following to load jQuery in the footer:

wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
wp_enqueue_script( 'jquery' );

I am then trying to load this AFTER jQuery using this:

function myscript() {
    ?>
    <script type="text/javascript">
    (function($){
    $(window).load(function(){


    /* full width slider */
    $('#slider').iosSlider({
        snapToChildren: true,
        desktopClickDrag: true,
        snapFrictionCoefficient: 0.8,
        autoSlideTransTimer: 500,
        infiniteSlider:true,
        autoSlide: true,
        autoSlideTimer: 5000,
        navPrevSelector: $('.next_<?php echo $sliderrandomid; ?>'),
        navNextSelector: $('.prev_<?php echo $sliderrandomid; ?>'),
        onSliderLoaded: startSlider,
        onSlideChange: slideChange,
        onSliderResize: slideResize,
    });

      function slideChange(args) { }

     function slideResize(args) { }

     function startSlider(args){  }
    })
    })(jQuery);

    </script>

    <?php

}
add_action( 'wp_footer', 'myscript' );

I have tried adding:

 if( wp_script_is( 'jquery', 'done' ) ) { //Script }

But unfortunately, the inline script doesn't load up.

Is anyone able to give me any tips? I'm pretty much half way there, just need the inline script to load AFTER jQuery so it works.

Thanks in advance!

  • 1
    The main jquery library should never be loaded in the footer. Inline scripts that depends on jQuery to be loaded first will fail. – Pieter Goosen Apr 13 '16 at 10:55
  • Thats precisely why I am trying to load my inline script after jQuery is loaded. – WPDEVE Apr 13 '16 at 11:00
  • 1
    Do not load the main jQuery library in the footer – Pieter Goosen Apr 13 '16 at 11:04
3

You are trying to load your inline js script after jQuery just by calling add_action( 'wp_footer', 'myscript' ); after wp_enqueue_script( 'jquery' );

But this will not load your myscript after jQuery. It is not how wp_footer and wp_enqueue_script works.

wp_footer has a third argument named "priority".

add_action( 'wp_footer', 'your_function', 100 ); //100 is priority here. larger the priority later that script will be executed.

Enqueued scripts are executed at priority level 20 using wp_footer.

And if you don't supply any third priority, script will be enqueued at priority 10 by default (Which means your script will be included before jQuery as you have not given any priority).

So you need to call your function after priority 20. For example:

add_action( 'wp_footer', 'myscript',50 );

try adding your script using above modification, it should work.

1

Seems like you'd be better off saving your script in a .js file and then enqueuing your script using wp_enqueue_script() instead of wp_footer. That way you can designate jquery as a dependency for your script.

wp_enqueue_script( 'myscript', 'path/to/myscript.js', array( 'jquery' ), false, true );

This also separates your js out of your php into a proper asset that can be tracked and updated separately, which is a good practice to get into.

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.