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?

2 Answers 2


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),

  • woah! The second paragraph. That's exactly what I do but different approach. Brilliant! !important should do the thing. Thank you anu! Mar 21, 2011 at 12:19
  • @Wordpressor Wherever possible, !important is to be avoided.
    – Cronco
    Mar 21, 2011 at 13:35
  • True - ideally you'll use specificity to ensure the user CSS has priority. @t31os's mechanism below also avoids this as typically you'll be inserting the 'dynamic' styles after the linked CSS, so it will have priority
    – anu
    Mar 21, 2011 at 13:43

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; ?>; }

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.

  • This is how a lot of themes do it (I think). There's just something in me that likes to separate out the styling as completely as possible from the main site code. Probably a pointless distinction!
    – anu
    Mar 21, 2011 at 12:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.