Support » Developing with WordPress » 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 2 years, 5 months ago by  mrtechnique.
Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Steve Stern

    (@sterndata)

    Support Team Volunteer

    Moderator Steve Stern

    (@sterndata)

    Support Team Volunteer

    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?

    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 2 years, 5 months ago by  mrtechnique.
    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    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

    (@jcastaneda)

    THEME COFFEE MONKEY

    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.

    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

    (@jcastaneda)

    THEME COFFEE MONKEY

    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. 🙂

    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/

    Moderator bcworkz

    (@bcworkz)

    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.