Best way of adding CSS which can be manipulated by the user via theme option panels?

Question

I thought about adding it as inline CSS with code from the functions.php (not really sure how to do it).

Something like this:

function addcss() {
   background: $this_is_the_css_value;
}

I would like to know that. But if there's is a better option (without adding inline CSS). I would like to know it too.

Answer 1

One way of doing this would be to create a "CSS" file from PHP. In other words, create a file, call it something like style.css.php, and at the beginning of the file put:

<?php header("Content-type: text/css"); 

Then, link that file in the head of your theme file. Because the style.css.php file is a PHP file, anything you can do in a normal PHP file can be done in this file. As such, you can pull theme option values from the database and use them. For example:

#header{
    background: <?php echo get_option('my-header-background-color'); ?>
}

Of course, you need to get the options into the database first, but since your question didn't address that, I won't go into it here.

Answer 2

Generating CSS from PHP means it has to run that code for each pageload, if it is possible generate a static CSS file and then enqueue it.

So... See:

How do I add CSS options to my plugin without using inline styles? or

Best way to inject css into admin_head in plugins? or

How to add CSS style sheet dynamically in wordpress