Possible to generate style tag in PHP? (Wordpress)

Question

I want to add CSS that is dependent on some PHP variables in the code that is generated before a WP_Query loop. Basically I want to use uniqid and apply the ID to some elements and then add some media query rules for these elements, possibly as <style> tags. I've tried the following, but I'm not sure if style tags that are put in the <body> are ignored or not since this is not working.

$id = uniqid();

<style>
#<?php echo $id; ?> {
    background: red!important;
    color: #FFF;
    padding: 2px 6px;
    border-collapse: separate;
}
</style>

The tag is placed in the DOM, but it's ignored. So I'm either looking for a way to put CSS that is generated in the template, in the <head>. Or any other method for adding CSS other than inline on the element itself, since I can't use media queries that way. Just to be clear, the code above is put inside a loop, as I need the meta values from the post in order to generate the CSS.

Or is this just stupid?

CSS ids can't start with digits ... https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier — user2182349, Dec 19 '18 at 04:01

score 2 · Accepted Answer · answered Dec 19 '18 at 02:59

Placing <style> tags within the <body> of your document is technically invalid, but in practice will work almost everywhere.

The problem I suspect you're running into is: the return value of uniqid() may begin with a number, and CSS identifiers cannot begin with numbers. So, if you generate an ID like "4b3403665fea6", your CSS might look okay, but it will be ignored.

You can fix this by passing a prefix to your call to uniqid(), like so:

$id = uniqid('id-');

...so that $id will be a value like "id-4b3403665fea6".

Sample demonstrating in-body `<style>`

<head>
<style>
  #id-4b3403665fea6 {
    background: blue;
  }
</style>
</head>

<body>
  <h1>Test</h1>
  <div id='id-4b3403665fea6'>Style me!</div>
  <style>
    #id-4b3403665fea6 {
        background: red!important;
        color: #FFF;
        padding: 2px 6px;
        border-collapse: separate;
    }
  </style>
</body>

Note that the <div> winds up with a red background, not blue like the <head> style specifies.

Ah, of course! Should've thought about that. Thanks! I'll try it and see if it works. — tobiasg, Dec 19 '18 at 08:52

score 1 · Answer 2 · answered Dec 19 '18 at 05:53

Hope this will help you.

<?php
$id = uniqid('cnt-');
?>

<style>
    #<?php echo $id; ?> {
        background: red!important;
        color: #FFF;
        padding: 2px 6px;
        border-collapse: separate;
    }
</style>
<div id="<?php echo $id; ?>">Test Content</div>

Possible to generate style tag in PHP? (Wordpress)

2 Answers2

Sample demonstrating in-body <style>

Sample demonstrating in-body `<style>`