1

I'm trying to make JS and CSS asynchronous without plugins(I know this is possible, without much of coding).

As I'm not really know php, I would like you to help me a little bit over here.

I found this code, to handle this kind of thing, but I don't really understand how to use it.

function add_async_attribute($tag, $handle) {
   $scripts_to_async = array('my-js-handle', 'another-handle');
   foreach($scripts_to_async as $async_script) {
      if ($async_script !== $handle) return $tag;
      return str_replace(' src', ' async="async" src', $tag);
   }
   return $tag;
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

What should I place exactly instead of my-js-handle or another-handle if JQuery file placed here: wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.3 ?

Also, if I'll enlarge the array, say like this:

array('my-js-handle', 'another-handle', 'one-more');

Would I need to change something, say this(in the end of add_filter): 10, 2); ?

And as for the css asynchronization... would it be enough to simply enlarge this array and add mine css address?

1

You would use the handle of your enqueued scripts, ie, the first parameter of the wp_enqueue_script function used in WordPress for all your scripts... (if you are loading them another way you should use this function instead.)

The handle for jQuery is... jquery actually jquery-core now. But each script queued will have it's own handle. A bit like a 'slug' for a post.

You are fine to add as many handles to that array without having to change the filter parameters. (The 10, 2 part is the filter run priority and number of arguments passed to the filter function respectively.)

But the script_loader_tag filters enqueued scripts, not stylesheets, so no this will not be fine for doing the same with CSS files.

EDIT I don't think that loop will work as it is, as it will return on the first fail, and thus not check all the handles. Use instead:

foreach($scripts_to_async as $async_script) {
  if ($async_script === $handle) {return str_replace(' src', ' async="async" src', $tag);}
}
  • Thank you. Could you please tell me, how should I implement this if I have plugin that load JavaScripts to be async.? I found a file in the plugins folder, and there's couple of wp_enqueue_script in it. As I understand this is the exact code that load the necessary "<scripts>". I tried to add in my array(in functions.php of my theme) this names of the plugin's wp_enqueue_script, but this didn't work. – tosananuco Apr 6 '16 at 5:23
  • yes the first argument is the handle, ie. wp_enqueue_script($handle,$url...... your array should just contain a list of those strings. if it is not working something else is wrong... ah. see edit. – majick Apr 6 '16 at 5:30
  • Thanks, but this still not working. I tried it like that: function add_async_attribute($tag, $handle) { $scripts_to_async = array('jquery'); foreach($scripts_to_async as $async_script) { if ($async_script === $handle) {return str_replace(' src', ' async="async" src', $tag);} } return $tag; } add_filter('script_loader_tag', 'add_async_attribute', 10, 2); – tosananuco Apr 6 '16 at 5:39
  • ah whoops my bad actually, the jquery handle is a combined dependency handle that includes jquery-core and jquery-migrate... so just change the array value to jquery-core – majick Apr 6 '16 at 6:54

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.