How to wrap HTML comments around enqueued styles?

Question

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.

0
, , Robert Andrews 2 years 2020-06-04T09:10:34-05:00 0 Answers 94 views 0

Leave an answer

Browse
Browse