How to wrap HTML comments around enqueued styles?
Is it possible to output HTML mark-up around enqueued stylesheets?
I enqueue as follows…
function enqueue_theme() {
wp_enqueue_style('looper-default', get_stylesheet_directory_uri().'/looper/dist/assets/stylesheets/theme.min.css');
wp_enqueue_style('looper-dark', get_stylesheet_directory_uri().'/looper/dist/assets/stylesheets/theme-dark.min.css');
wp_enqueue_style('looper-custom', get_stylesheet_directory_uri().'/looper/dist/assets/stylesheets/custom.css');
}
add_action('wp_enqueue_scripts', 'enqueue_theme');
… which correctly comes out as follows…
<link rel='stylesheet' id='looper-default-css' href='https://example.com/wp-content/themes/foundation/looper/dist/assets/stylesheets/theme.min.css?ver=5.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='looper-dark-css' href='https://example.com/wp-content/themes/foundation/looper/dist/assets/stylesheets/theme-dark.min.css?ver=5.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='looper-custom-css' href='https://example.com/wp-content/themes/foundation/looper/dist/assets/stylesheets/looper-custom.min.css?ver=5.4.1' type='text/css' media='all' />
But what I’d really like to output is…
<!-- BEGIN THEME STYLES -->
<link rel='stylesheet' id='looper-default-css' href='https://contexthq.com/wp-content/themes/foundation/looper/dist/assets/stylesheets/theme.min.css?ver=5.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='looper-dark-css' href='https://contexthq.com/wp-content/themes/foundation/looper/dist/assets/stylesheets/theme-dark.min.css?ver=5.4.1' type='text/css' media='all' />
<link rel='stylesheet' id='looper-custom-css' href='https://contexthq.com/wp-content/themes/foundation/looper/dist/assets/stylesheets/looper-custom.min.css?ver=5.4.1' type='text/css' media='all' />
<!-- Disable unused skin immediately -->
<script>
var skin = localStorage.getItem('skin') || 'default';
var unusedLink = document.querySelector('link[data-skin]:not([data-skin="'+ skin +'"])');
unusedLink.setAttribute('rel', '');
unusedLink.setAttribute('disabled', true);
</script>
<!-- END THEME STYLES -->
That means a few things…
- Prefixing and suffixing the enqueued stylesheets with some comment markup.
- Outputting a
<script>
between the comment, after the stylesheets.
I have tried prefixing and suffixing the whole of wp_head()
with this stuff, but that doesn’t seem to be quite right, since there’s a lot of other stuff from other plugins that is output by wp_head()
besides.
I have tried echoing mark-up inside enqueue_theme() at the appropriate point, but that’s not right either – each are output far higher in the order.
Leave an answer