Skip to content

Instantly share code, notes, and snippets.

@wpbullet
Forked from schilke/functions.php
Created September 9, 2017 03:24
Show Gist options
  • Save wpbullet/ba3e882b774580e45066efe8bd8a9dd2 to your computer and use it in GitHub Desktop.
Save wpbullet/ba3e882b774580e45066efe8bd8a9dd2 to your computer and use it in GitHub Desktop.
How to load CSS files asynchronously in WordPress (using Scott Jehl's "loadCSS")
<?php
// This is the cleaner code per request of a thread in the LinkedIn group "WordPress"
// ...
// register and enqueue loadCSS
function load_scripts_and_styles() {
// register loadCSS
wp_register_script( 'load-css-async', get_stylesheet_directory_uri() . '/path/to/js/loadCSS.js', array(), '', false );
// enqueue loadCSS
wp_enqueue_script( 'load-css-async' );
}
add_action('wp_enqueue_scripts', 'load_scripts_and_styles', 999);
// ...
?>
// This is the cleaner code per request of a thread in the LinkedIn group "WordPress"
// this is a modified file for demonstration purposes
// original repository https://github.com/filamentgroup/loadCSS/
/*!
loadCSS: load a CSS file asynchronously.
[c]2014 @scottjehl, Filament Group, Inc.
Licensed MIT
*/
function loadCSS( href, before, media ){
"use strict";
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
ss.rel = "stylesheet";
ss.href = href;
ss.media = "only x";
ref.parentNode.insertBefore( ss, ref );
setTimeout( function(){
ss.media = media || "all";
} );
return ss;
}
// here's where you specify the CSS files to be loaded asynchronously
// load Google Web Font
loadCSS( "http://fonts.googleapis.com/css?family=Lato|Open+Sans" );
// load Font Awesome from CDN
loadCSS( "//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" );
// load a local CSS file
loadCSS( "http://yourserver.tld/path/to/your/css/file.css" );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment