define css class in functions.php

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.

PHP Stylesheet

Caveat

Related Posts: