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...

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...

• theme-development
• css

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.

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

    endif;
}

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