I am trying to change rel='stylesheet' to rel='preload' using style_loader_tag but it isn't doing something. Could anyone please tell me what is wrong with my code?

add_filter( 'style_loader_tag',  'preload_css', 10, 2 );

function preload_css( $html, $handle ){

    $targetHanldes = array('flexible_shipping_notices', 'animate-css');

    if( in_array( $handle, $targetHanldes ) ){

        $html = str_replace("rel='stylesheet'", "rel='preload'", $html);  

    return $html;

I tested your code and it seems to work fine, my guess is that your $targetHanldes containes the wrong handles.

Best option would be to see what $html and $handle contain and that way you could add them to the haystack.

But for now try this instead

$targetHanldes = array('flexible-shipping-notices', 'animate');

Again this is pure guess work so you better check the $html and $handle variables

  • ah, this worked for animate but not flexible shipping notices. So, you are right, it must be the handles. I was using the id when I view the source but guess that isn't it. How do I determine the handles? Jul 14 at 14:43
  • 1
    @user8463989 You could use Query monior plugin, this is the best tool when developing in wordpress, there is a sectin there for styles and scripts, you can find the handle there, or just echo $handle if you dont have the time (only do this if the site is not live =]) Jul 14 at 14:45

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.