How to load jQuery before fallback in WordPress footer

1 comment

1. Edit II

   Since the question has changed in essence many times, and In order to save you from reading ( e.g. – understanding ) all of the long explanation below, just use .

   add_action('wp_footer', 'write_custom_scripts',9999);
   

   This will set the priority to very high and will probably echo your code last ( unless you or other plugin / theme developers used a higher priority or later filter ..)

   For those who want to do the right way :

   function my_javascripts() {
       wp_enqueue_script('the-script-handle', 
                         'path/to/file.js', 
                         array('jquery','other_script_that_we_depend_on'), 
                         'scriptversion eg. 1.0', 
                         true);
   }
   add_action('wp_enqueue_scripts', 'my_javascripts');
   

   When you enqueue a script like above ( the right way ) , you can see that it wp_enqueue_script() has 4 arguments.path, dependencies ,version ,and in-footer .

   This is the only right way to load a script , and if you need , just enqueue also jquery at the same function — wp will make sure it loads first .

   The dependencies means that wp will not load your script UNLESS jQuery is already loaded and will try to load jQuery FIRST …

   The LAST argument will actually define weather to load your script in the FOOTER ( TRUE ) or in header ( FALSE )

   That being said , you can always load jQuery in the HEADER and not footer ( but it is not so recommended )

   After that , For the last bit of your script , you can echo it in the footer , and you can also control how and when to add it .

   What I do not understand , is the overall aim of your method . ( this part is about the “doing it wrong ” )

   Firstly – I think that loading from CDN is not a good IDEA . AND I AM NOT ALONE. it is to be considered a bad practice in WP without any meaningful Pros ( the time issue is a joke since you will be probably loading a LOT of other scripts directly AND scripts are Cached ).

   While doing it – it is good that you think of a fallback, but the fallback should be wp own version – and not one that you include yourself .

   If you still insist on doing it wrong , you can always do something like ( or just change order of execution ):

           remove_action('wp_head', 'wp_print_scripts');
           remove_action('wp_head', 'wp_print_footer_scripts', 9);
           remove_action('wp_head', 'wp_enqueue_scripts', 1);
       // your stuff
           add_action('wp_footer', 'wp_print_scripts', 5);
           add_action('wp_footer', 'wp_enqueue_scripts', 5);
           add_action('wp_footer', 'wp_print_footer_scripts', 5);
   

   Which basically allow you to echo your stuff before or after the wp_footer action at will And while technically it will work -. it is still wrong .

   Edit I After question edit .

   you have several problems in that code .

   1. you are registering jQuery (CDN ) with the handle jquery which is reserved for WP.

   If you want to do that ( and you shouldn´t . please don´t ) you need to deregister jquery BEFORE registering it again .

   <?php wp_deregister_script( 'jquery' ); ?>
   

   Again. I can not stress enough how wrong that is .

   2 . you are registring the whole bunch of script – but where do you enqueue them ?

   3 . Again . Like in comments ( I think you still do not understand )

   If you have a script to add to the footer – you need to register and enqueue it with dependencies .. ( the right way )

   In your case from edited question :

   make a file called my_script.js

   var custom = '1';
   

   Enqueue it !

   wp_enqueue_script('the-script-handle', 
                         'path/to/my_script.js', 
                         array('jquery','other_script_that_we_depend_on'), 
                         '0.0.1', 
                         true);
   

   In this case , your script will load AFTER the dependencies you listed …
   What you are trying to do is echoing directly .

   As for the comment of how to correctly pass variables – read here

   And you can also do something like this ( objects ):

   $data = (object) array(
     'render' => 'canvas',
     'size' => 100,
     'radius' => ($q_corner_r * 0.3),
   );
   
   $output .= 
     <script type="text/javascript">;
      //<![CDATA[
   
       var options = ' . json_encode($data) . '
   
      // ]]>;
      </script>';
   

   Log in to Reply