How do I add CSS options to my plugin without using inline styles?

Question

I recently released a plugin, WP Coda Slider, that uses shortcodes to add a jQuery slider to any post or page. I am adding an options page in the next version and I would like to include some CSS options but I don't want the plugin to add the style choices as inline CSS. I want the choices to be dynamically added to the CSS file when it's called.

I would also like to avoid using fopen or writing to a file for security issues.

Is something like this easy to accomplish or would I be better off just adding the style choices directly to the page?

Answer 1

Use wp_register_style and wp_enqueue_style to add the stylesheet. DO NOT simply add a stylesheet link to wp_head. Queuing styles allows other plugins or themes to modify the stylesheet if necessary.

Your stylesheet can be a .php file:

wp_register_style('myStyleSheet', 'my-stylesheet.php');
wp_enqueue_style( 'myStyleSheet');

my-stylesheet.php would look like this:

<?php
// We'll be outputting CSS
header('Content-type: text/css');

include('my-plugin-data.php');    
?>

body {
  background: <?php echo $my_background_variable; ?>;
  font-size: <?php echo $my_font_size; ?>;
}

Answer 2

Dynamically building a CSS file and then loading it adds a HUGE performance burden to what should be a very low bandwidth deal of adding a CSS file, especially if there are variables in the CSS that are going to be processed through WP. Because it is two different files being created for one page load, WP starts up twice and runs all the DB queries twice, and it's a big mess.

If your slider is only going to be on one page, and you want the styles set dynamically, then your best bet is to add a style block to the header.

In order of performance:

1. Add small block of styles in header, dynamically created - Very fast
2. Add a non-dynamic stylesheet via wp_enqueue_style - Medium
3. Add a dynamic stylesheet via wp_enqueue_style - Very Slow

Answer 3

This is how I usually do it:

function build_stylesheet_url() {
    echo '<link rel="stylesheet" href="' . $url . 'stylesheetname.css?build=' . date( "Ymd", strtotime( '-24 days' ) ) . '" type="text/css" media="screen" />';
}

function build_stylesheet_content() {
    if( isset( $_GET['build'] ) && addslashes( $_GET['build'] ) == date( "Ymd", strtotime( '-24 days' ) ) ) {
        header("Content-type: text/css");
        echo "/* Something */";
        define( 'DONOTCACHEPAGE', 1 ); // don't let wp-super-cache cache this page.
        die();
    }
}

add_action( 'init', 'build_stylesheet_content' );
add_action( 'wp_head', 'build_stylesheet_url' );