Add extra parameter in tag using script_loader_tag

by

I am using this code in my plugin to enqueue script:

wp_enqueue_script( 'wpfrank-ptbw-pinit-js', PTBW_PLUGIN_URL . 'assets/js/pinit.js', array('jquery'), '', true );

The wp_enqueue_script function making a default <script> tag output like this:

<script type="text/javascript" src="http://localhost/development/wp-content/plugins/pin-it-button-pinterest-widgets/assets/js/pinit.js"></script>

Want to add some extra parameter into the script tags like:

<script async defer data-pin-hover="true" src="http://localhost/development/wp-content/plugins/pin-it-button-pinterest-widgets/assets/js/pinit.js"></script>
  1. asysnc
  2. defer
  3. data-pinhover="true"

How do I achieve that using wp_enqueue_script?

Are there any hook or action to pass extra parameters?

Any help really appreciated.

3 Answers
3

You can use script_loader_tag filter to fulfill your requirement. add below code in your active theme’s functions.php file. it will add extra parameter in your script tag.

function add_attribute_to_script_tag($tag, $handle) {
   # add script handles to the array below
   $scripts_to_defer = array('wpfrank-ptbw-pinit-js');

   foreach($scripts_to_defer as $defer_script) {
      if ($defer_script === $handle) {
         return str_replace(' src', '  async defer data-pin-hover="true" src', $tag);
      }
   }
   return $tag;
}
add_filter('script_loader_tag', 'add_attribute_to_script_tag', 10, 2);

Leave a Comment