Save custom option in CSS file

I have built this script in order to display a CodeMirror in a plugin and through the CodeMirror integration I can inject and save CSS in the head of the website, the result is very cool but I would like to do something more standard and save the CSS code in a file.

Here is the code:

add_action('admin_enqueue_scripts', 'codemirror_enqueue_scripts');

function codemirror_enqueue_scripts($hook) {
        // use CodeMirror for CSS in style page
        $cm_settings['codeEditor'] = wp_enqueue_code_editor(
            array(
                'type' = 'text/css',
                'plugin' = 'wp-phone-message'
            ));
        wp_localize_script('jquery', 'cm_settings', $cm_settings);

        wp_enqueue_script('wp-theme-plugin-editor');
        wp_enqueue_style('wp-codemirror');
}

and here is the JS that connect CodeMirro with a textarea:

jQuery(document).ready(function($) {
   wp.codeEditor.initialize($('#fancy-textarea'), cm_settings);
})

And here is my text area which is in my plugin form in the admin area:

          textarea name=wp-phone-message-css id=wp-phone-message-css
             class=large-text code
             rows=3?= get_option('wp-phone-message-css'); ?/textarea

So wp_localize_script send the variable cm_settings that contains the setting of CodeMirro to JQuery.

I have also built this code in order to print the code in the head of the website inside the tag style:

  add_action( 'wp_head', addCustomCss);
  function addCustomCss(){
     if( get_option('wp-phone-message-css') ){
        echo 'style';
        echo wp_unslash( get_option('wp-phone-message-css') );
        echo '/style';
     }
  }

Everything is fine so far and everything is working well, The problem is that I don't want to display the CSS code stored in variable get_option('wp-phone-message-css') in the HTML head, I would like to save the CSS get_option('wp-phone-message-css') in a CSS file which I will enqueue in the frontend.

Can you guys help me with this? how can I save an option variable in a file in WordPress?

Thanks

Topic autosave wp-enqueue-style css Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.