For the purposes of code examples I’ll assume that you have an option called my_background_color and that you want to do something like this:

body {
    background-color: <?php echo $theme_opt['my_background_color']; ?>
}

We’ll start with the simplest method.

header.php

Most themes have a header.php file that contains template code for the top of the HTML output. This makes it easy to add custom CSS with options, just echo it out inside the HEAD section of the HTML:

<style type='text/css'>
body {
    background-color: <?php echo $theme_opt['my_background_color']; ?>
}
</style>

The advantages to this approach is that it’s very simple, you already have a header.php so adding a few more lines doesn’t take much work. The disadvantage is that this solution isn’t very flexible, if you have complex rules about when and how to include the CSS then your header.php file gets a lot extra “stuff” that may not need for every page.

If your needs are simple then this works great. If not, I suggest using either wp_head or parse_request.

wp_head

Each theme calls a WordPress action at the end of the HTML HEAD section – wp_head – that can be used to include the custom CSS:

<?php
add_action( 'wp_head', 'my_custom_css_hook' );
function my_custom_css_hook( ) {
    # get theme options
?>

<style type='text/css'>
body {
    background-color: <?php echo $theme_opt['my_background_color']; ?>
}
</style>

<?php
}

The only real difference between this approach and the previous one is that it’s less clutter in header.php. Instead of having all that code in header.php it can be moved out to a separate file and WordPress will include it at runtime whenever the wp_head action fires.

parse_request

WordPress can provide your theme with custom URLs, these can turn around and serve up what ever you want, including CSS. This technique takes a little bit more work, but provides the maximum degree of flexibility. There are a couple steps to this one, first what you’ll need to have in header.php:

<link rel='stylesheet' type='text/css' href="<?php bloginfo( 'url' ); ?>/?my-custom-content=css" />

The my-custom-content=css just needs to be something unique to your theme so that it doesn’t conflict with plugins that might be using parse_request as well.

Next we need to tell WordPress how we want to handle this request:

add_action( 'parse_request', 'my_custom_wp_request' );
function my_custom_wp_request( $wp ) {
    if (
        !empty( $_GET['my-custom-content'] )
        && $_GET['my-custom-content'] == 'css'
    ) {
        # get theme options
        header( 'Content-Type: text/css' );
?>

body {
    background-color: <?php echo $theme_opt['my_background_color']; ?>
}

<?php
        exit;
    }
}

A few things in there that I want to point out. Pay attention to line 8, this tells the browser what sort of content we are sending back. In this case it was CSS, but it could have been JavaScript or anything else. Also note that I didn’t add any cache related headers, it’s worth reading up on cache control in HTTP headers so that you know how that works. Line 16 is also important, we don’t want WordPress attempting to do any further processing after we return the CSS so the right thing to do is exit as soon as possible.

And if you wanted to keep the CSS in a separate file ( custom-css.php for our example ) that looked more like a normal CSS file then the my_custom_wp_request function could look like:

function my_custom_wp_request( $wp ) {
    if (
        !empty( $_GET['my-custom-content'] )
        && $_GET['my-custom-content'] == 'css'
    ) {
        # get theme options
        header( 'Content-Type: text/css' );
        require dirname( __FILE__ ) . '/custom-css.php';
        exit;
    }
}

allowing your custom-css.php to look like:

body {
    background-color: <?php echo $theme_opt['my_background_color']; ?>
}

basically just enough PHP to fill in the option blanks, other wise a normal looking CSS file. I rather like this approach, it provides a nice degree of separation and control.

Conclusion

Now you have three methods for including database powered CSS in your WordPress theme. I like using parse_request with the CSS in a separate file ( the last example ), for a little bit of extra work you get lots of flexibility and a nice layer of separation that makes managing the CSS portion easier.

Having any tips on how to improve on this? Leave a comment below!

.round-box {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

This got me to wondering, does it support percentages as well? So I tried this:

.round-box {
    border-radius: 5%;
    -moz-border-radius: 5%;
    -webkit-border-radius: 5%;
}

This worked in Firefox 3.6 but not in Chrome. Some searching around revealed the Mozilla -moz-border-radius page. For border radius it specifically mentions that it supports length units as well as percentages:

A percentage, relative to the width of the box (the percentage is relative to the width even when specifying the radius for a height).

That page also mentioned support for elliptical borders. To do that you add another radius value separated by a slash:

.round-box {
    border-radius: 15px / 50px;
    -moz-border-radius: 15px / 50px;
    -webkit-border-radius: 15px / 50px;
}

The elliptical border worked on Chrome as well. If you bend this tight enough you can get pretty close to a circle.

I wanted Internet Explorer to add support for border radius before; now that I’ve got even more radius toys to play with I’m practically begging. I’m sorry Internet Explorer users but I’m tired of various border hacks when there are simple and clean CSS methods available.