<?php
/**
* Add custom conditional to styles
*
* Lets say we are loading Google Fonts via JavaScript, but we still want
* to use the font if JavaScript is disabled. We can add a custom conditional
* Add a noscript around our style.
*
* @param string $tag The tag we want to wrap around.
* @param string $handle The handle of the tag.
* @return string The wrapped around tag.
*/
function mwtsn_example_style_loader_tag( $tag, $handle ) {
if ( 'google-font' === $handle ) {
$tag = '<noscript>' . $tag . '</noscript>';
}
return $tag;
}
add_filter( 'style_loader_tag', 'mwtsn_example_style_loader_tag', 10, 2 );
<?php
/**
* Add custom conditional to styles
*
* If you want to load for IE8+ you need a custom conditional arround
* your style declaration that WordPress does not cater for.
*
* @param string $tag The tag we want to wrap around.
* @param string $handle The handle of the tag.
* @return string The wrapped around tag.
*/
function mwtsn_example_style_loader_tag( $tag, $handle ) {
if ( 'ie-8-plus' === $handle ) {
$tag = "<!--[if gt IE 8]><!-->$tag<![endif]-->";
}
return $tag;
}
add_filter( 'style_loader_tag', 'mwtsn_example_style_loader_tag', 10, 2 );
<?php
/**
* Enqueue Scripts
*
* Some stylesheets for our example, with conditional loading for IE.
*/
function mwtsn_example_wp_enqueue_scripts() {
// A stylesheet targeted at IE8+ and new browsers.
wp_enqueue_style( 'ie-8-plus', get_stylesheet_directory_uri() . '/styles/ie-8-plus.css' );
// This will load the `ie-8-plus` script for IE8+, but will not load for modern browsers.
wp_style_add_data( 'ie-8-plus', 'conditional', 'lt IE 7' );
// Load external Google Fonts.
wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic' );
}
add_filter( 'wp_enqueue_scripts', 'mwtsn_example_wp_enqueue_scripts' );
<?php
/**
* Enqueue Scripts
*
* Some stylesheets for our example.
*/
function mwtsn_example_wp_enqueue_scripts() {
// A stylesheet targeted at IE8+ and new browsers.
wp_enqueue_style( 'ie-8-plus', get_stylesheet_directory_uri() . '/styles/ie-8-plus.css' );
// Load external Google Fonts.
wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic' );
}
add_filter( 'wp_enqueue_scripts', 'mwtsn_example_wp_enqueue_scripts' );