Title: Add async in enqueue
Last modified: May 20, 2017

---

# Add async in enqueue

 *  [mrtechnique](https://wordpress.org/support/users/mrtechnique/)
 * (@mrtechnique)
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/)
 * A client wants me to add this external script to the footer:
 * `<script src="//www.apex.live/scripts/invitation.ashx?company=regalrestorationservices"
   async></script>`
 * I just pasted it to the footer of the site, but I wanted to add it to the footer
   the right way. I thought about adding this to the functions.php file:
 *     ```
       function regal_chat_script() {
          wp_enqueue_script( 'chat-scrip', "//www.apex.live/scripts/invitation.ashx?company=regalrestorationservices", array(), '1.0', true);
          add_action( 'wp_enqueue_scripts', 'real_chat_script' );
       }
       ```
   
 * But doing this would leave out the async attribute. How can I add the aync attribute?
    -  This topic was modified 9 years ago by [mrtechnique](https://wordpress.org/support/users/mrtechnique/).

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9151695)
 * Here’s one method:
 * [https://ikreativ.com/async-with-wordpress-enqueue/](https://ikreativ.com/async-with-wordpress-enqueue/)
 * I found several other methods suggested
 * [https://www.google.com/search?q=enqueue+async+wordpress](https://www.google.com/search?q=enqueue+async+wordpress)
 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9151844)
 * I just found this on my twitter feed!
 * [https://jasonyingling.me/fixing-render-blocking-scripts-third-party-sources-wordpress/](https://jasonyingling.me/fixing-render-blocking-scripts-third-party-sources-wordpress/)
 *  Thread Starter [mrtechnique](https://wordpress.org/support/users/mrtechnique/)
 * (@mrtechnique)
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9152155)
 * Steve,
 * Thanks for the quick answers! I used your first solution. It helped, but the 
   script I’m enqueueing isn’t JavaScript. When I added the code, this is what I
   got as the output:
 * `<script type='text/javascript' src='//www.apex.live/scripts/invitation.ashx?
   company=regalrestorationservices&ver=ff0ea97f0f9e034a4cf07eab83d15fce' async='
   async'></script>`
 * How can I remove the type=’text/javascript’ part?
 *  Thread Starter [mrtechnique](https://wordpress.org/support/users/mrtechnique/)
 * (@mrtechnique)
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9152169)
 * I need the script line to be outputted like this:
 * `<script src="//www.apex.live/scripts/invitation.ashx?company=regalrestorationservices"
   async="async"></script>`
    -  This reply was modified 9 years ago by [mrtechnique](https://wordpress.org/support/users/mrtechnique/).
 *  Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/)
 * (@jcastaneda)
 * THEME COFFEE MONKEY
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9152267)
 * What’s super neat about that filter is that you can easily do that. Give me a
   few minutes to come up with the code for that.
 *  Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/)
 * (@jcastaneda)
 * THEME COFFEE MONKEY
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9152284)
 * Try the following code snippet:
 *     ```
       /**
        * Hooks to the front-end
        */
       add_action( 'wp_enqueue_scripts', 'regal_chat_script' );
       function regal_chat_script() {
       	wp_enqueue_script( 'chat-script', "//www.apex.live/scripts/invitation.ashx?company=regalrestorationservices", array(), '1.0', true );
       }
   
       /**
        * Filters just the chat-script
        */
       add_filter( 'script_loader_tag', 'regal_tag', 10, 3 );
       function regal_tag( $tag, $handle, $src ) {
       	if ( $handle !== 'chat-script' ) {
       		return $tag;
       	}
   
       	return "<script src='$src' async></script>";
       }
       ```
   
 * Let us know if this helps.
 *  Thread Starter [mrtechnique](https://wordpress.org/support/users/mrtechnique/)
 * (@mrtechnique)
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9152336)
 * That solved my problem. Thanks a lot, Jose! This isn’t as important, but how 
   can I make the script the last one before the closing body tag?
 * What does the 10 and 3 represent in the add_filter command?
 *  Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/)
 * (@jcastaneda)
 * THEME COFFEE MONKEY
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9152453)
 * So, the `10` is the priority of the script being loaded. So if you add a higher
   number it will be towards the end of the line of being printed. The `3` is how
   many variables to pass the callback function. Each hook/filter has different 
   ones so it can be a good thing to know how many and what is being passed.
 * If that doesn’t makes sense, please let us know and we can explain it a little
   better. 🙂
 *  Thread Starter [mrtechnique](https://wordpress.org/support/users/mrtechnique/)
 * (@mrtechnique)
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9168544)
 * Thanks for answering so quickly, and I apologize for my slow reply. I’m having
   a little trouble wrapping my head around this. This line calls the regal_tag 
   function:
 * `add_filter( 'script_loader_tag', 'regal_tag', 10, 3 );`
 * The function only adds async to the script with the chat-script handle.
 * What’s the callback function? Is it regal_tag? If I used a lower number than 
   10 in the filter, would the code appear lower in the code? I added the code you
   gave me on this site:
 * [http://www.regalrestorationservices.com/](http://www.regalrestorationservices.com/)
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9171213)
 * Yup, filter hooks are tricky to understand initially. Once you do fully understand,
   everything about customizing WP makes so much more sense!
 * The “callback” is a function the filter calls when WP core code executes something
   similar to `$nutag = apply_filters('script_loader_tag', $tag, $handle, $src );`
   So in this case regal_tag(). What apply_filters() does is it goes through the
   list of added callbacks and uses call_user_func() for each one. Whatever your
   callback returns ends up being assigned to $nutag.
 * By using a lower priority parameter (the 10), your callback will be executed 
   earlier than any others hooked to the same filter that use 10 (the default). 
   Of course then, using a parameter larger than 10 means your callback will be 
   called later than the others. We often think of passing lower numbers as assigning
   a higher priority to your callback. While true, it is often most advantageous
   to assign a larger number, lower priority so your callback executes last so it
   has the final say in the eventual value returned by the apply_filters() call.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Add async in enqueue’ is closed to new replies.

## Tags

 * [enqueue](https://wordpress.org/support/topic-tag/enqueue/)
 * [external scripts](https://wordpress.org/support/topic-tag/external-scripts/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 10 replies
 * 4 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [9 years ago](https://wordpress.org/support/topic/add-async-in-enqueue/#post-9171213)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics