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

4 Views

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.

Read More

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

Post Views: 4

Related posts

Leave a Reply

5 comments

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

  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

  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' );

  4. I’ve had difficulty with all the recommendations of this ilk – maybe I’m a bit thick, or maybe contributors have lost the common touch.

    I settled on coding this in the plug-in php file:-

    echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/css.css' type='text/css' rel='stylesheet' />";
echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/public.css' rel='stylesheet' type='text/css'/>";

    It seems to work. It only loads on those pages which use the plugin. It loads after the h1 tag which is fine by me. I can’t see how it could be more efficient or more clear.

    ….but perhaps I’m wrong – I did say I was a bit thick.

  5. Update since WordPress 3.3

    There is a function called wp_add_inline_style which can be used to dynamically add styles based on theme/plugin options. This can be used to add a small css file in the head which should be fast and efficient.

    <?php
function myprefix_scripts() {

    wp_enqueue_style('name-of-style-css', plugin_dir_path(__FILE__) . '/css/ccsfilename.css');

    $css = get_option( 'loader_css', 'default css goes here for when there is no value' );

    //or for Example
    $color = get_option( 'custom_plugin_color', 'red' ); //red is default value if value is not set
    $css = ".mycolor{
                background: {$color};
           }";

    wp_add_inline_style('name-of-style-css', $css);

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );