I am wondering if it is typical to have custom CSS files in the uploads folder.

I have inherited a custom theme from a previous developer, and a significant amount of the styling of the front-end is derived from this stylesheet, which again is not in a theme or plugin folder but the wp-content/uploads folder. I am struggling to find out how it is derived, but there it is.

Is this considered poor practice or is there a use case for this?

I believe the previous developer said something about Visual Composer or JS Composer and compiling less files... but I am not sure about this, he is out of contact, and I'm wondering why we are using a stylesheet in this way, therefore this question is about best practices and why a plugin such as Visual Composer would put the CSS there... I also don't see how it is derived from this plugin because when I go into Visual Composer's custom CSS feature the style-sheet appears to be empty. The stylesheet in question is also minified, whereas the other styles are not...

2 Answers 2


If the theme is generating CSS based on theme options then it might choose to do this. Say your theme lets you pick a 'primary colour'. It might want to style lots of elements in this colour. To do this it would need to output CSS with certain values substituted with your chosen colour.

If it's a small amount of CSS the theme might generate it on the fly for every load by just outputting CSS in the header with PHP tags used to output the values. Or it could substitute the values into some CSS when the setting is saved and save the result in the database. Then it might just output the saved CSS in the header.

If there's a large amount of CSS then it might take too long to generate on the fly, or take up too much space in the database. So it might make more sense to save it as a file. This is not an unreasonable thing to do.

So yes, there is a use case for this and I wouldn't describe it as "poor practice".

Since you mentioned LESS. LESS is a CSS preprocessor that, for example, would let you write CSS with variables in it. So @primary anywhere you want to use a particular colour called 'primary'.

A theme could use the PHP LESS library to process a LESS file like this but substitute the variables with the values for your settings in the database. After processing the LESS the theme could then save the result as a CSS file (possibly minified) and enqueue that to load the styles.

As for why it's in the uploads directory? That would be because it's the only place in WordPress a plugin can be guaranteed to have permission to write to.

  • Quick additional question on this - the default behavior of CSS generated by using the codex.wordpress.org/Appearance_Customize_Screen option is not to put it in the uploads folder, correct? That is if I am having a problem with how the /uploads css file is being loaded it does not stem from default behavior? Commented Apr 28, 2018 at 19:40
  • That CSS is just added in a style tag in the head. It is not saved as a file anywhere. Commented Apr 29, 2018 at 3:42
function my_custom_css() {
    $upload_dir = wp_upload_dir(); 
    $base_dir = wp_get_upload_dir(); 
    $styles = wp_get_custom_css();
    if ( $styles || is_customize_preview() ) :
        $type_attr = current_theme_supports( 'html5', 'style' ) ? '' : ' type="text/css"';

        $file = file_put_contents($upload_dir['basedir']."/new-style-function.css", strip_tags( $styles ) );
        move_uploaded_file($file, $upload_dir['baseurl']);


add_action( 'save_post', 'my_custom_css' );

$upload_path = wp_upload_dir(); 
wp_enqueue_style ('custom-style',$upload_path['baseurl'] .'/new-style-function.css');

remove_action('wp_head', 'wp_custom_css_cb', 101);
  • Hi @zara, it's not clear how your answer relates to the question. Maybe you can add some text to explain.
    – mozboz
    Commented Jul 16, 2020 at 22:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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