Is it possible to enqueue a raw CSS string directly from within a template file?

Question

I was wondering if it's possible to enqueue raw CSS as a string directly from within a template file?

I'm writing a custom template for a page and need to add some style rules for it. What I want to do is write the styles out as a string var in PHP then use the enqueue_style function to load these styles, rather than me having to add them in to 'style.css' or some other external style-sheet.

I assumed that so long as I enqueue my styles before calling the 'get_header' function, and if I hook in to the 'wp_head' or 'wp_enqueue_styles' actions, that this would work but it doesn't appear to and I'm not sure if 'wp_enqueue_style' can take a raw CSS string.

Anyone got any advice please?

Kind regards,

Chris

Answer 1

Yes and no.

You can load a raw CSS string into the header programatically, but you can't use wp_enqueue_style() to enqueue it. That function specifically loads files into the header in <link> tags.

But what you can do is something like this:

function print_inline_script() {
?>
<style type="text/css">
/* ... styles go here ... */
</style>
<?php
}
add_action( 'wp_head', 'print_inline_script' );

Answer 2

Sorry, I just noticed this bit:

I assumed that so long as I enqueue my styles before calling the 'get_header' function, and if I hook in to the 'wp_head' or 'wp_enqueue_styles' actions, that this would work but it doesn't appear to and I'm not sure if 'wp_enqueue_style' can take a raw CSS string.

It should be working, make sure you've entered both a handle and a URL for your CSS file.

Answer 3

Yes as long as it's registered/enqueued before wp_head() in the header.

Answer 4

As writing styles into templates/plugins directly like <style>.my-class{...}</style> is discouraged by the WordPress Handbook, and if you have a stylesheet you load anyway using wp_enqueue_style, then you may consider using the wp_add_inline_style() function. See the examples in the docs` for implementation instructions.

This way you can "hook" your CSS-string onto another stylesheet and it will be displayed as a separate <style> element in the DOM.