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
file_put_contents()
after your plugin form is submitted.