define css class in functions.php

Question

In my theme I use theme options to set colors to categories (heading colors, dividers colors etc etc) The way I do it is defining variables which holds a color hexa like so:

$category1_color = get_option('category1_color');
$category2_color = get_option('category2_color');

etc etc..

and inside my admin I set the color (e.g - #ffccoo or yellow) in a "theme options" I already built where my client can easily change global colors to each category element in a second.

like so:

if (is_category("news")) { echo ' style="border-bottom-color:' . $category1_color . ';"'; } ?>

now - my client has a custom top menu which has items (mostly categories)

I want him to also be able to change the color of the texts in the menu. now, I know it is possible to add class to each menu item (this is fairly easy) but I dont want to create classes in the CSS file because it is not dynamic what I want it to grab the variable which was already changed by the client eg - $category1_color (lets say it is set to purple right now) and assign it dynamically to a class called "category1-item" which is used as a class on the menu item so if later the client is changing the color in my theme options it dynamically changes the color of the menu item too without going to the CSS file and edit it.

I wwas thinking about setting a class in the functions.php file and simply stored the variable I already created (which holds a color already) in this class like so:

category1-item = $category1_color

I just don't know how to add classes to the functions.php file and store a variable into each class.

any idea?

Answer 1

First off, the origin of the data (WordPress theme options) aside, this question is pretty much about generic PHP and CSS.

That being said, here's how:

PHP Stylesheet

Add a new file to your theme, call it "dynamic_styles.php" or the like. Note that while it will contain mostly CSS, you give it a .php file extension.
This tells the server to parse the file with the PHP interpreter before serving it to the client.

In the first lines of the new file you set the content-type to "css":

<?php
    header("Content-type: text/css; charset: UTF-8");
?>

Thereafter grab the values like you normally would (going with your above example):

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

    $category1_color = get_option('category1_color');
    $category2_color = get_option('category2_color');
?>

Now use these in your later CSS as you would with HTML markup:

 div.cat-1 {
    border-bottom-color: <?php echo $category1_color; ?>;
 }

Caveat

While the above would work flawlessly, if the variables had static values, you have to go an extra step to use WP functions in your stylesheet.

How to go about that has been explained in this excellent answer.