Ability to use custom css file name and location

[numanzahid]

Enhancement: Ability to edit custom CSS file location in a theme or a custom plugin.

Use case:

• Using a custom file location will allow the developer to edit custom styles located in a custom theme or plugin.

• I use a custom plugin for my client websites. All custom styles go in this file. I can use SOCSS to edit those styles.

Alternatively: Allow some action hook to replace file name and location in the existing SOCSS plugin.

Additional: There is currently no other plugin that can do live CSS with a custom file location. I think it will add so much value to the plugin's reputation.

[Misplon]

Hi @numanzahid

Thanks. Please, find a build to test below:

https://siteorigin.com/wp-content/uploads/2022/09/so-css.1.5.4-beta.zip

Please, see the instructions for testing at https://github.com/siteorigin/so-css/pull/161. Please, let us know how it goes.

[numanzahid]

Hi @Misplon

thanks you for the quick response. really appreciate the work. However I cant seem to get it working. error: There has been a critical error on this website.

It seems like filter siteorigin_custom_css_file is not registered.

Also existing functionality for so-css file is not working. default file is inline on the website.

[Misplon]

Apologies for the hassle! We'll reply with a new version to test ASAP tomorrow.

[AlexGStapleton]

Hi @numanzahid,

Sorry for the delay. We've revamped https://github.com/siteorigin/so-css/pull/161 to better account for different usage and possible (such as deciding to stop using the filter). I've prepared an updated build and you can download it via the following link:

so-css.1.5.4-beta-2.zip

Please note that there's now an updated filter.

add_filter( 'siteorigin_custom_css_file', function( $file ) {
    return array(
        'file' => get_template_directory() . '/rtl.css',
        'url' => get_template_directory_uri() . '/rtl.css',
    );
} );

Please give this build a try and let me know how you go.

Kind regards, Alex

[numanzahid]

Hi @AlexGStapleton

thanks for the update. I have installed the plugin and added the filter to the functions.php. it works like a charm. I can't get it to work with get_stylesheet_directory_uri() . I think I am doing something wrong. I am no good with php, I will ask my team for help. will get back to you with more feedback.

I have also tried it with plugin_dir_path( __FILE__ ) in my custom plugin. and it worked there as well. so it is all win win. 👍

However there is one little problem. it does not copy the styles that are already existing in the stylesheet, instead it overrides the file completely. Same thing happens when you manually edit the css file, the changes are not displayed in SOCSS page, and when you hit save, your fille resets to what SOCSS has in db. It is like it always overrides the file. Is it possible to get existing styles form the file before opening it in SOCSS editor and then start working on it?

[AlexGStapleton]

Hi,

Upon activating the filter the file contents should be loaded instead of the standard SiteOrigin CSS values. Then when making a change the file will be updated with any changes made. The file is only directly loaded once at this time. Is the file never loaded for you? Are changes being written? You mentioned you had trouble with the filter. Can you please provide me with a copy of the code you ended up using?

Kind regards, Alex

[numanzahid]

Hi @AlexGStapleton I am really sorry for late response.

You are right. Plugin reads the file and updates the file. there was problem with me writing the filter. It works like a charm. I am really glad that it does. Many thanks for you consideration.

here is what I did for child theme custom.css

add_filter( 'siteorigin_custom_css_file', function ( $file ) {
    return array(
        'file' => get_stylesheet_directory() . '/custom.css',
        'url'  => get_stylesheet_directory_uri() . '/custom.css'
    );
} );

This is what I did for style.css in my custom plugin.

add_filter( 'siteorigin_custom_css_file', function ( $file ) {
    return array(
        'file' => plugin_dir_path( __FILE__ ) . 'css/style.css',
        'url'  => plugins_url( '/css/style.css', __FILE__ ),
    );
} );

[AlexGStapleton]

Hi @numanzahid,

It's great to hear that worked! I see no issues with the snippets you're using. :) We'll be releasing this in a plugin update shortly. Thank you for suggesting this and for your help with testing this.

Kind regards, Alex