[SOLVED] wordpress script_loader_tag in function.php

Issue

I am trying to add defer and async to my script tags to increase it is performance

here is the code that I am using

function add_defer_attribute($tag, $handle) {
    print('hi');
    echo('hi');

   // add script handles to the array below
   $scripts_to_defer = array('jquery-core-js','fortuna.lib-js');
   
   foreach($scripts_to_defer as $defer_script) {
       
      if ($defer_script === $handle) {
         return str_replace(' src', ' defer="defer" src', $tag);
      }
   }
   return $tag;
}

add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

function add_async_attribute($tag, $handle) {
    print('hello');
    echo('hello');
   // add script handles to the array below
   $scripts_to_async = array('jquery-core-js', 'fortuna.lib-js');
   
   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);

I added this code at the bottom of function.php that is found in the theme that I am using

but it does not work, I have added the id of the scripts that I need to defer and async

nothing happen, can anyone advise what should I do

here are the script tags on my site

<script type='text/javascript' src='https://mydomain/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>
<script type='text/javascript' src='https://mydomain/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/awesome-support/assets/admin/js/vendor/jquery.magnific-popup.min.js?ver=6.0.11' id='wpas-magnific-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/awesome-support/assets/admin/js/admin-popup.js?ver=6.0.11' id='wpas-admin-popup-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/allow-webp-image/public/js/allow-webp-image-public.js?ver=1.0.0' id='allow-webp-image-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/hide-admin-bar-based-on-user-roles/public/js/hide-admin-bar-based-on-user-roles-public.js?ver=1.7.0' id='hide-admin-bar-based-on-user-roles-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/revslider/public/assets/js/rbtools.min.js?ver=6.0' id='tp-tools-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/revslider/public/assets/js/rs6.min.js?ver=6.2.2' id='revmin-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/wp-user-avatar/assets/flatpickr/flatpickr.min.js?ver=5.8.3' id='ppress-flatpickr-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/plugins/wp-user-avatar/assets/select2/select2.min.js?ver=5.8.3' id='ppress-select2-js'></script>
<script type='text/javascript' src='https://mydomain/wp-content/themes/fortuna/js/libs.min.js?ver=5.8.3' id='fortuna.lib-js'></script>
<script type='text/javascript' id='fortuna.common-js-extra'>

Solution

Replace

$scripts_to_defer = array('jquery-core-js','fortuna.lib-js');

With this

$scripts_to_defer = array( 'jquery-core', 'fortuna.lib' );

You don’t need to add -js to handle because WordPress automatically adds when enqueue scripts Try the below code.

function add_defer_attribute( $tag, $handle ) {
    // add script handles to the array below
    $scripts_to_defer = array( 'jquery-core','fortuna.lib' );
    foreach( $scripts_to_defer as $defer_script ) {
        if ($defer_script === $handle) {
            return str_replace( ' src', ' defer="defer" src', $tag );
        }
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );

function add_async_attribute( $tag, $handle ) {
    // add script handles to the array below
    $scripts_to_async = array( 'jquery-core', 'fortuna.lib' );
    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 );

Tested and working fine.

enter image description here

Answered By – Bhautik

Answer Checked By – Timothy Miller (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *