wp_enqueue_script in_footer ignored / Broken Menu button Jetpack Mobile Theme

I was afraid you were going to say something like this 🙂

I don’t want to put everything in the footer, because I read that might cause problems when things are depending on scripts loaded at the top of the page.

By the way, Jetpack’s Gravatar Hovercards also doesn’t work with WP Minify Fix for the same reason: gravatar-hovercards.php uses wp_localize_script() to place a piece of javascript on the page that sets a variable WPGroHo. That piece of script is placed in the footer. Normally, it would be followed by the loading of wpgroho.js, which is enqueued with $in_footer=true and needs WPGroHo. When using WP Minify Fix, wpgroho.js is minified at the top, but wp_localize_script() still puts the script setting the variable WPGroHo at the bottom. Result: wpgroho.js runs before WPGroHo is set, gives an error (ReferenceError: WPGroHo is not defined) and all the following scripts that it was combined and minified with are also not executed anymore. In this case, I solved it by excluding wp-content/plugins/jetpack/modules/wpgroho.js from minify.

A similar problem seems to be going on with Jetpack’s Sharing module. It uses wp_localize_script() to set a variable named sharing_js_options. This variable is needed by the script sharing.js. Although I don’t see it enqueued with $in_footer=true, the setting of the variable and the script are normally placed in the footer. With WP Minify Fix active, sharing.js is moved to the head, while the setting of sharing_js_options stays in the footer, again resulting in an error. I solved this as well by excluding wp-content/plugins/jetpack/modules/sharedaddy/sharing.js from minify.

I can imagine that in certain scenario’s WP Minify Fix’s current behavior is a feature, not a bug, but for me it is giving me a lot of trouble right now.

Thanks anyway for an otherwise great plugin,
Peter

That would be nice. Thanks!

Wow, great, that sure looks like a big step in the right direction. Doesn’t completely work for me yet, though. Here are my test results:

• For wpgroho.js (Jetpack’s Gravatar Hovercards module) and sharing.js (Jetpack’s Sharing module), their variables (WPGroHo and sharing_js_options) are normally set just before loading the javascript file:

  Without minification:

  </footer>
  ...
  <script type='text/javascript'>/*  */
  var WPGroHo = {"my_hash":""};
  /*  */</script> <script type='text/javascript' src='http://localhost/example/wp-content/plugins/jetpack/modules/wpgroho.js?ver=4.1'></script>
  ...
  <script type='text/javascript'>/*  */
  var sharing_js_options = {"lang":"en","counts":"1"};
  /*  */</script> <script type='text/javascript' src='http://localhost/example/wp-content/plugins/jetpack/modules/sharedaddy/sharing.js?ver=20140920'></script>
  ...
  </body>

  With minification, the minified script files are loaded after the </footer>-tag, but still before the variables are set:

  </footer><script type="text/javascript" src="http://localhost/example/wp-content/plugins/wp-minify-fix/min/?f=wp-includes/js/jquery/jquery.js,wp-includes/js/jquery/jquery-migrate.min.js&b=example&m=1000000000"></script><script type='text/javascript' src='http://localhost/example/wp-content/plugins/wp-minify-fix/min/?f=wp-content/plugins/akismet/_inc/form.js,wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js,wp-content/plugins/contact-form-7/includes/js/scripts.js,wp-content/plugins/jetpack/modules/wpgroho.js,wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/js/small-menu.js,wp-includes/js/comment-reply.min.js,wp-content/plugins/jetpack/modules/sharedaddy/sharing.js&b=example&m=1234567890'></script>
  ...
  <script type='text/javascript'>/*  */
  var WPGroHo = {"my_hash":""};
  /*  */</script>
  ...
  <script type='text/javascript'>/*  */
  var sharing_js_options = {"lang":"en","counts":"1"};
  /*  */</script>
  </body>

  This results in the same script errors as before:
  ReferenceError: WPGroHo is not defined
  If wpgroho.js is excluded:
  ReferenceError: sharing_js_options is not defined

• small-menu.js (Jetpack’s Mobile Theme, containing code for the menu button for Twenty Eleven) now works, provided it is not minified together with wpgroho.js, which normally precedes small-menu.js. Because of the error wpgroho.js throws (see above), the code from small-menu.js does not get executed, resulting in a non-responsive menu button after all.

Perhaps load the minified scripts even further down the page, not just below </footer>, but all the way down, just above </body>?

Just let me know if you need more information.