Is it possible to enqueue a raw CSS string directly from within a template file?
-
21-04-2021 - |
Pergunta
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
Solução
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' );
Outras dicas
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.
Yes as long as it's registered/enqueued before wp_head() in the header.
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.