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.

I'm generating my CSS dinamically in a function using a link like this

<link id="www-core-css" rel="stylesheet" href="http://wordpress/myplugin/theme-css-loader.php?v=1" /> 

and i was wondering what approach to take. I could either point the href to a file like http://wordpress/myplugin/theme-css-loader.php?v=1 or i could try to map a request to a function http://mysite.com/wordpress/?requested_page=myplugin_theme_css_loader&v=1 but i don't know how to that in the frontend ( in the backend i would add a page with add_menu_page and then remove the page with remove_menu_page and the url would still be callable. Do you know how i could map the url request to a function and does it make sense? Requiring the file seems to have far less overhead to me

share|improve this question

2 Answers 2

up vote 1 down vote accepted

This is forked from something I wrote for a similar requirement.

empty( $_GET['my-css-var'] ) || add_action( 'plugins_loaded', 'wpse_59089_css' );
function wpse_59089_css()
{       
    header( 'Content-Type: text/css' );

    // Aggressive caching to save future requests from the same client.
    $etag = '"' . md5( __FILE__ . $_GET['my-css-var'] ) . '"';

    header( 'ETag: ' . $etag );
    header( 'Expires: ' . gmdate( 'D, d M Y H:i:s', time() + 31536000 ) . ' GMT' );
    header( 'Cache-Control: public, max-age=31536000' );

    if ( empty( $_SERVER['HTTP_IF_NONE_MATCH'] ) || $etag != stripslashes( $_SERVER['HTTP_IF_NONE_MATCH'] ) ) {
        // Set all your variables here.
        $my_height = 100;

        // Render your CSS with a heredoc!
        $content = <<<CSS
#my_id {
    height: $my_height;
}
CSS;

        header( 'Content-Length: ' . strlen( $content ) );
        echo $content;

    } else {
        // Not modified!
        status_header( 304 );
    }

    // We're done!
    exit;
}

And the resource link would simply be:

http://example.com/?my-css-var=20120719_or_static_hash.css

Whenever the CSS was changed (typically after a settings update), change the datestamp/hash in the URL to force-refresh.

If you've switched etags off at the server level, you'll need to resort to sending and checking "last modified" instead.

Update:

Don't use a link. Extra http requests are evil. Put your dynamic CSS inline. Really. Even google recommends it.

It all depends. Unless the CSS weighs in tiny, or it's only for a one-off page with low repeat visits, then yeah, inline might be the way to go.

But an aggressively cached external stylesheet will only trigger a request on first access (for the large majority of clients*).

Every new visitor to the site will have to download the CSS one way or another. But inline styles are sent for every subsequent view, whereas the external will hit the local cache.

Take a 1000 visitors, 10 hits each, 500 bytes of CSS. Inline will fatten up the bandwidth an additional ~4MB**. Might not seem much, but bump the CSS size, or the hits per visitor, and it'll continue to creep.

Like I said to start with, it all depends! How large is the CSS? Where is it used? Do you have a high ratio of new to loyal visitors? (*Is most of your audience behind a proxy?) (**Are you implementing "Not Modified" on your HTML?)

I guess the point I'm making is that "HTTP requests are evil" isn't gospel, even if it was spouted from the mouth of Google ;)

I'm still of the opinion that anything more than a few lines belongs in an external stylesheet, coupled with a tight set of caching rules, but that suits me, not everyone!

share|improve this answer
    
Actually i'm working on a plugin so i would have to make some checks to see if etags are on or off. Do you think that there is no performance gain in pointing to a single file?So that i do not have to bootstrap Wordpress just to grab the CSS? –  Nicola Peluchetti Jul 19 '12 at 21:57
    
Do you think that there is no performance gain in pointing to a single file? None whatsoever. And in fact, by hooking onto plugins_loaded, you're saving further processing that would occur if you simply used something like include '../../../wp-load.php' (not to mention loading WP yourself is highly inadvisable). –  TheDeadMedic Jul 19 '12 at 22:06
    
Don't use a link. Extra http requests are evil. Put your dynamic CSS inline. Really. Even google recommends it. –  Otto Jul 20 '12 at 2:38
2  
And I'm not sure my answer deserves a downvote. I've provided a solution the OP was specifically asking for - the debate of using external CSS should be a sidenote to the problem at hand. –  TheDeadMedic Jul 20 '12 at 3:39
1  
@Otto i totally agrre with the answer provided here, the solution is to get caching right, not putting 4.000 CSS lines inline. And this would be true even with 500 lines of CSS. –  Nicola Peluchetti Jul 20 '12 at 11:50

I'm generating my CSS dinamically in a function...

If so, great! You should just need to hook the output of that function into the 'wp_print_scripts' action hook, like so:

function wpse59089_dynamic_css() {
    ?>
<style type="text/css">
<?php
// Dynamic CSS goes here
?>
</style>
    <?php
}
add_action( 'wp_print_scripts', 'wpse59089_dynamic_css' );
share|improve this answer
    
Agree with this answer, but I'd use the wp_head hook instead. No particular reason, I just think it's clearer. –  Otto Jul 20 '12 at 2:36
    
@Otto but in this way i couldn't cache the CSS, right? –  Nicola Peluchetti Jul 20 '12 at 9:55
1  
Nor should you. How much CSS are you talking about here? If it's more than 20 lines, you should re-evaluate what you're doing to begin with. Dynamic CSS should be generated in small batches only. There's no sane reason to do more. –  Otto Jul 21 '12 at 21:00
    
@otto Why not? What if it's a theme with a large choice of variating options? And rather than output all these overrides in the <head />, generate one single, optimized stylesheet? I've done this in the past & had no problems with performance (though I generated & saved it as a physical file). I agree it's not common practice, and inline still remains ideal for small snippets, but I just don't understand the flat-out objection to this technique. –  TheDeadMedic Jul 22 '12 at 10:03
    
This really starts to get outside the scope of WordPress, and into web development in general, but in almost all cases, inline stylesheets in the HTML head are faster and more efficient overall than any other method of injecting CSS. –  Chip Bennett Jul 22 '12 at 14:26

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.