Note: Peter Knight pointed out in the comments, that this approach will cause problems on some server setups. On testing it, I found that on one of my local servers, the files were not saved and no error was served.

Once upon a time, I used to do some rather silly things in code. Okay, I most likely do silly things now too, but I’m still oblivious to them 😛 But back then, one of the dumbest thing I did, was to attempt to load CSS via PHP.

I was creating a dynamic WordPress plugin which changed the CSS based on user input in the backend. Inline CSS is ugly and not very efficient, so logically I looked for a solution which involved loading the CSS as an external “file”.

Loading CSS via a .php file

I thought I was very smart in implementing a style.php file, which was added something like this:

<link rel='stylesheet' href='http://domain.com/wp-content/plugins/some-plugin/style.php' type='text/css' />

This seemed great. I was very proud of myself. Then people started complaining that my plugin didn’t work. It turned out that some people had disabled the ability to access .php files directly from the plugins folder. Arghh!

Loading CSS via WordPress

Briliantly, I managed to solve the access problem by outputting the CSS directly from WordPress itself. I simply added a query variable to the home URL, checked that the query variable was set, and boom! I had a funky looking CSS “file” loaded somewhat like this:

<link rel='stylesheet' href='http://domain.com/?load_css=yep' type='text/css' />

Performance problems

I was very proud of myself for solving the compatibility problem. What hadn’t occurred to me though, was that loading the entirety of WordPress was not a smart thing to do when all you need to access is a simple CSS file. WordPress is a big program, and loading it twice per page was horrendously dumb way to solve that problem.

It was WP Tavern regular Otto (now of WordPress.org) who eventually convinced me of my own stupidity.

The solution

The optimal solution was easy in concept, although it did take me a while to figure out how to do it. In the rare (and it is very rare that you would need to do this) situation in which you need to output dynamically created CSS, you need to place it into the uploads folder of the site. My first thought on how to do this was to use the file_put_contents() function, but this unfortunately is not a recommended practice as some hosts do not handle file permissions correctly when doing this. The trick, is to use the WP_Filesystem class to handle the creation of the file.

Oddly, during an extensive search on the interwebz, I never found a functioning piece of code to actually do this. There are functions which look like they should work, but did not. Or there were code snippets which did part of the job, but had some weirdness going on, or enforced unneeded authentication. So, below is a simple chunk of PHP code which allows you to automagically copy data into a file in the WordPress uploads folder. It uses the built in WP_Filesystem class to ensure the security aspects of file storage is handled correctly, and it uses wp_upload_dir() to ensure that WordPress multi-site is catered for.

Hopefully some of you find this useful 🙂

<?php

// Lets create some test CSS code
$css = '/* Some test CSS */ body {background:red;}';

// Stash CSS in uploads directory
require_once( ABSPATH . 'wp-admin/includes/file.php' ); // We will probably need to load this file
global $wp_filesystem;
$upload_dir = wp_upload_dir(); // Grab uploads folder array
$dir = trailingslashit( $upload_dir['basedir'] ) . 'some-folder/'; // Set storage directory path

WP_Filesystem(); // Initial WP file system
$wp_filesystem->mkdir( $dir ); // Make a new folder for storing our file
$wp_filesystem->put_contents( $dir . 'style.css', $css, 0644 ); // Finally, store the file :)

?>

Note: It is actually very rarely that you need to do this. I’m guessing about 99% of the times I see this sort of thing being done, it is in a situation where simple inline CSS or an HTML change would be a much better option