How do you modify CSS files via admin panel?

Question

All theme styles are in style.css file.

Let's say first line looks like:

body {
    background-color: #fff;
}

Now, I've created an option in admin panel named body_bg. User types #000 there and I want the value in style.css to change.

How do I achieve that?

The easiest way to me looks like I have to rename style.css to .php, and just do:

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

body {
     background-color:  <?php echo get_option('body_bg');?>   ;
    }

And then just link style.php in empty style.css file. It's perfectly valid and works, but I've never seen a theme with style.php file, so how do people modify their stylesheets dynamically?

Answer 1

If you're wanting styles to be dynamic, then you'll have to emit your CSS file as you are suggesting. However, as WordPress often uses styles.css as a theme definition file, renaming styles.php might cause problems.

It might be better to collect all the 'dynamic' definitions into a separate file (eg dynamic-styles.php) and import them from your main style.css file via @import(url),

Answer 2

What i'd personally do is just add the additional CSS into the head whenever the theme option for styling is set.

All themes(or well coded ones) place their stylesheet before wp_head, which means we can reliably(semi) hook on and add some additional styling that will override the theme's natural(default) styling..

// Get the option once
$css_option = get_option( 'your_option' );

// Add action when there's a non-empty value
if( !empty( $css_option ) )
    add_action( 'wp_print_styles', 'custom_css_stuff' );

function custom_css_stuff() {
    // Bring the data into the scope of the callback function
    global $css_option;
    ?>
<style type="text/css">
body { background-color: <?php echo $css_option; ?>; }
</style>
    <?php
}

This outputs the css after the theme's stylesheet which will allow the CSS to override whatever was set by the stylesheet.

The action is only added when the option isn't empty, get_option will also return an empty string when the option doesn't exist, so this covers both not being set(an empty value) or the option not existing.