Community Forums › Forums › Archived Forums › Design Tips and Tricks › Load style.css async
- This topic has 4 replies, 2 voices, and was last updated 7 years, 11 months ago by
Victor Font.
-
AuthorPosts
-
March 13, 2017 at 10:35 pm #203035
iamzeus
MemberI want to implement (without using echo in the function) this into genesis:
// load styles asynchronously function new_site_make_styles_async($tag, $handle, $src) { if (!is_admin()) { return str_replace("rel='stylesheet'", "rel='preload' as='style' onload=\"this.rel='stylesheet'\"", $tag) . "<noscript>{$tag}</noscript>"; exit; } return $tag; } add_filter("style_loader_tag", "new_site_make_styles_async", 10, 3);
This is the format I need before placing loadCSS js. Anybody knows?
March 14, 2017 at 7:47 am #203070Victor Font
ModeratorYou almost have it right. The style_loader_tag filter has 4 parameters. You want to manipulate the $html parameter, not $tag. This code will give you what you want:
// load styles asynchronously function new_site_make_styles_async($html) { if (!is_admin()) { $html = str_replace("rel='stylesheet'", "rel='preload' as='style' onload=\"this.rel='stylesheet'\"", $html) . "<noscript>{$html}</noscript>"; } return $html; } add_filter("style_loader_tag", "new_site_make_styles_async", 10, 4);
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?March 14, 2017 at 10:14 am #203081iamzeus
MemberThanks a lot, yea needed $handle as well :), ended up with this solution:
// load styles asynchronously add_filter( 'style_loader_tag', 'style_transform_loadCSS', 10, 2 ); function style_transform_loadCSS( $html, $handle ) { if ( CHILD_THEME_NAME == $handle ) $searchArray = array("rel='stylesheet' id='$handle-css'", "type='text/css' media='all'"); $replaceArray = array("rel=\"preload\"", "as=\"style\" onload=\"this.rel='stylesheet'\""); return str_replace($searchArray, $replaceArray, $html); return $html; }
thanks for the help
March 14, 2017 at 11:04 am #203084iamzeus
MemberAnother question, how do I add cache busting query strings of last mod to that function i Just posted?
This is my query string last mod function
// Replace Query String for Last Modified String add_action( 'wp_enqueue_scripts', 'cache_buster_styles' ); function cache_buster_styles() { // Get the stylesheet info. $stylesheet_uri = get_stylesheet_directory_uri() . '/style.css'; $stylesheet_dir = get_stylesheet_directory() . '/style.css'; $last_modified = date ( "ymd.h.i.s", filemtime( $stylesheet_dir ) ); // Enqueue the stylesheet. wp_enqueue_style( 'cache-buster' , $stylesheet_uri, array(), $last_modified ); }
How to I implement that into my correct function that mos my style.css
// load styles asynchronously add_filter( 'style_loader_tag', 'style_transform_loadCSS', 10, 2 ); function style_transform_loadCSS( $html, $handle ) { if ( CHILD_THEME_NAME == $handle ) $searchArray = array("rel='stylesheet' id='$handle-css'", "type='text/css' media='all'"); $replaceArray = array("rel=\"preload\"", "as=\"style\" onload=\"this.rel='stylesheet'\""); return str_replace($searchArray, $replaceArray, $html)."<noscript>{$html}</noscript>"; return $html; }
March 14, 2017 at 1:21 pm #203102Victor Font
ModeratorYou don't need two return statements in the first function.
I suggest you use the kint php debugger plugin. https://wordpress.org/plugins/kint-php-debugger/
At the start of the style_transform_loadCSS function, add the line d($html);
This will display the value of the HTML being sent to the function. You'll have to append the filetime to the src attribute. By using kint, you'll be able to figure out what you have to do. In fact, with kint, you can see the value of any function, array, or filter return value. It's quite useful for custom functions.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet? -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.