apply_filters( ‘style_loader_tag’, string $tag, string $handle, string $href, string $media )

User Contributed Notes

1. Skip to note 4 content

   Muhammad Usama Masood 8 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

   This simple change will make your browser call the Google Font page in the applicable mode (HTTP vs HTTPS) with wp_enqueue_style.

   add_filter( 'style_loader_tag', 'wpdocs_remove_https_styles', 10, 2 );
   function wpdocs_remove_https_styles( $html, $handle ) {
   	$handles = array( 'twentysixteen-fonts', 'open-sans' );
   	if ( in_array( $handle, $handles ) ) {
   		$html = str_replace( 'https:', '', $html );
   	}
   	return $html;
   }
2. Skip to note 5 content

   Geoffrey Brossard 3 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note

   To defer loading of non-critical CSS :

   function prefix_defer_css_rel_preload( $html, $handle, $href, $media ) {
       if ( ! is_admin() ) {
           $html = '<link rel="preload" href="' . $href . '" as="style" id="' . $handle . '" media="' . $media . '" onload="this.onload=null;this.rel=\'stylesheet\'">'
               . '<noscript>' . $html . '</noscript>';
       }
       return $html;
   }
   add_filter( 'style_loader_tag', 'prefix_defer_css_rel_preload', 10, 4 );
3. Skip to note 6 content

   Matt Radford 11 months ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note

   If you want to harden your website against supply chain attacks, you can use this filter to add Subresource integrity checking to an enqueued style.

   For example, for Select2 style v4.0.9 from cdnjs.com, you would copy the SRI hash from https://cdnjs.com/libraries/select2/4.0.9, and add it as an attribute to the style. Then check for the select2 handle and that it’s a link, before adding the SRI attributes.

   This function uses the WP_HTML_Tag_Processor class introduced in WordPress 6.2.

   You can add SRI to an enqueued script in a similar way: https://developer.wordpress.org/reference/hooks/wp_script_attributes/#comment-6783

   /**
    * Add Subresource Integrity check to CDNJS style.
    *
    * @param string  $html   Style  html.
    * @param string  $handle WordPress style handle.
    *
    * @return string $html   Style  html.
    */
   function wpdocs_style_subresource_integrity( string $html, string $handle ): string {
   	if ( 'select2' !== $handle ) {
   		return $html;
   	}
   
   	$tags = new WP_HTML_Tag_Processor( $html );
   
   	if ( false === $tags->next_tag( 'link' ) ) {
   		return $html;
   	}
   
   	$tags->set_attribute( 'integrity', 'sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==' );
   	$tags->set_attribute( 'crossorigin', 'anonymous' );
   
   	return $tags->get_updated_html();
   }
   add_filter( 'style_loader_tag', 'wpdocs_style_subresource_integrity', 10, 2 );