Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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

share|improve this answer
    
woah! The second paragraph. That's exactly what I do but different approach. Brilliant! !important should do the thing. Thank you anu! –  Wordpressor Mar 21 '11 at 12:19
    
@Wordpressor Wherever possible, !important is to be avoided. –  Cronco Mar 21 '11 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 '11 at 13:43
add comment

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.

share|improve this answer
    
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 '11 at 12:48
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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