How to move all javascript files to footer?

Hi jjfollano,

Check out the $in_footer parameter here in the Codex:

https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script

When you set the $in_footer parameter to “true”, WordPress will force scripts to be loaded before the closing body tag.

In Google Language Translator, locate this code:

function scripts($hook_suffix) {
  global $p;
  if ($p == $hook_suffix) {
    wp_enqueue_script( 'my-admin-script', plugins_url('/admin.js',__FILE__), array('jquery'));
	wp_enqueue_script( 'my-flag-script', plugins_url('/flags.js',__FILE__), array('jquery'));
	wp_register_style( 'style.css', plugins_url('css/style.css', __FILE__) );
    wp_enqueue_style( 'style.css' );
  }
}

function flags() {
    wp_enqueue_script( 'flags', plugins_url('/flags.js',__FILE__), array('jquery'));
    wp_register_style( 'style.css', plugins_url('css/style.css', __FILE__) );
    wp_enqueue_style( 'style.css' );
}
add_action('wp_enqueue_scripts', 'flags');

And then try changing it to this instead:

function scripts($hook_suffix) {
  global $p;
  if ($p == $hook_suffix) {
    wp_enqueue_script( 'my-admin-script', plugins_url('/admin.js',__FILE__), array('jquery'),'',true);
	wp_enqueue_script( 'my-flag-script', plugins_url('/flags.js',__FILE__), array('jquery'),'',true);
	wp_register_style( 'style.css', plugins_url('css/style.css', __FILE__) );
    wp_enqueue_style( 'style.css' );
  }
}

function flags() {
    wp_enqueue_script( 'flags', plugins_url('/flags.js',__FILE__), array('jquery'),'',true);
    wp_register_style( 'style.css', plugins_url('css/style.css', __FILE__) );
    wp_enqueue_style( 'style.css' );
}
add_action('wp_enqueue_scripts', 'flags');

My solution here is untested, so if you have problems, just let me know and I will try and fix, but I think it should work.

Thanks! Rob

jjfollano, I tested this on my site, and it seems to work.

Also, thanks for making me think of this – I will likely include this by default in the next release – it makes good sense.

Let me know if you need any assistance.

Rob

Thanks for the quick response Rob!

So I tested it on all three of my sites and stil have the code placed there but no luck.

You can see here:
https://yellowtelescope.com/
https://facialplasticsurgerymiami.com/
https://laserlightforhairgrowth.com/

Any advise??

I have w3 cache enabled dont know if this could be causing any conflicting issues?

Yes, that could be it. Go to the settings panel for w3 cache, and then clear cache there, then turn off caching in the panel. Then disable that plugin, and test again.

Let me know! Thanks!

Still throwing the issue….I even tried remove_action('wp_head', 'wp_enqueue_scripts', 1); and add_action('wp_footer', 'wp_enqueue_scripts', 1); in my fuctions.php file. Im stumped…..

Would you mind posting link to your site? And is this a child theme?

And are you sure that you have a wp_footer() function in your footer.php file?

Here is the link: https://facialplasticsurgerymiami.com/ it has a child theme and just checked, the wp_footer(); is located in the footer.php.

jjfollano, sorry I just noticed you posted your website links in the first part of this thread. Sorry for not noticing that.

I just checked the beginning of this post. The scripts and CSS that you mention in the very beginning are not loaded by my plugin. Those are housed on Google servers….so that is why it’s not working….ha ??

My scripts are the flags.js and admin.js, which is why I’m still chatting with you about this. I totally missed this.

Also, I’m not seeing the scripts from my plugin loading up at all I’m guessing this is because you are not using “flags”.

Interesting cause once i disable the translator plugin those scripts are removed from the head? Are you sure they are not being placed in there by the google api?

https://translate.googleapis.com/translate_static/css/translateelement.css
https://translate.googleapis.com/translate_static/js/element/main.js
https://translate.googleapis.com/translate_static/js/element/19/element_main.js

Hi jjfollano, yes those scripts would show up only when my plugin is enabled, because those need to be added to the head in order to allow translation. However, they are being added by Google, not by my plugin. The plugin simply adds the Google Website translation tool, which is totally controlled by Google servers.

So there is not a default method that we can use, through my plugin, that would change where they are loaded.

Maybe there is some way that we could tell Google to load them elsewhere, but it would not be a WordPress function, it would likely be some kind of hack.

I know this is probably somewhat frustrating, I will keeping thinking about what we can do here, and post back here with anything I come up with.

Ok great! Thanks again Rob just let me know when you have figured out some sort of solution.

$is_multilanguage = get_option('googlelanguagetranslator_multilanguage');

        if ($is_multilanguage == 1) {
          $multilanguagePage = 'multilanguagePage:true,';

		  $str.='<script type="text/javascript">
         function GoogleLanguageTranslatorInit() {
         new google.translate.TranslateElement({pageLanguage: \''.get_option('googlelanguagetranslator_language').'\','.$multilanguagePage . $language_choices.'autoDisplay: false, '.analytics().' }, \'google_language_translator\');}
              </script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=GoogleLanguageTranslatorInit"></script>
<div id="google_language_translator"></div>';
		return $str;
		} elseif ($is_multilanguage == 0) {		  

        $str.='<script type="text/javascript">
         function GoogleLanguageTranslatorInit() {
         new google.translate.TranslateElement({pageLanguage: \''.get_option('googlelanguagetranslator_language').'\','.$language_choices.'autoDisplay: false, '.analytics().' }, \'google_language_translator\');}
              </script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=GoogleLanguageTranslatorInit"></script>
<div id="google_language_translator"></div>';
		return $str;
		}

This is what is calling those external files.

Yes, that is correct, although you will notice that element.js is the file called here, and then inside that file is where all the magic happens, which I have no control over.

Unless there is something I do not understand, I don’t believe I can separate this functionality locally, away from the other files being called up from Google.

Let me know if you find this to be incorrect, because I would love to load it up locally.

Thanks!