use add_action(‘wp_head’) in a widget for generating dynamic CSS styles

Once the widgets are being evaluated, the head of your site is completed, so you cannot use wp_head anymore.

Adding <style> tags is an option, but will indeed generate a warning from the validator.

Using the customizer is possibly confusing, because it is supposed to be about theme looks in general, not about specific widgets.

You can however, make a clever combination of inline styles in the widget and media queries in the widget style file. Have your widget generate html code like this:

<a>
<span class="mobile" style="color:blue;">
<span class="normal" style="color:red;">
link
</span>
</span>
</a>

Then add the following css in your style file:

@media only screen and (max-width:960px) { .normal {color:inherit !important;}}

On mobile browsers this will make the inner <span> take its color from the outer <span>.

Leave a Comment