Version: 1.0
Write, preview & implement css code in real time.
This plugin adds a textarea to the Customize page that allows theme editors to write, preview, and implement CSS code in real time.
It also includes a frontend CSS editor window with live preview capability.
FAQ
Will the CSS be applied to my live site if I hit “Save & Publish”?
Yes. Your changes are saved to the database and applied immediately to the frontend.
Will the Live CSS Preview allow me to write @media queries?
Absolutely — this is one of its primary features.
My CSS doesn’t seem to apply. How can I override the theme’s CSS?
The plugin adds a livecss class to the <body> element.
Use it to increase specificity when needed:
body.livecss { background-color: red; }
2.1.6
whitespace error removed which may conflict with other plugins
2.1.7
Hardening security (sanitization + escaping)
Cleaning up uninstall logic
Stabilizing CSS injection / preview behavior
2.2.2
New behavior, complete rework.
Front-end Live CSS editor now:
-Loads CSS directly from Appearance → Customize → Additional CSS
-Saves directly back to Additional CSS
-Applies changes instantly on the front end
Migration
-Automatically migrates existing Live CSS data into Additional CSS on update
-Ensures no CSS is lost during upgrade
Improvements
-Added Minify, Format, and Reset tools in the editor
-Improved compatibility with themes and plugins (including complex layouts)
-Hardened CSS and JS to prevent conflicts (Bootstrap, Toolset, etc.)
-Ensures editor appears above all site elements (z-index handling)
Performance
-CSS now outputs only once using native WordPress methods
-Reduced duplicate rendering and improved front-end efficiency
Cleanup
-Removed redundant Customizer editor (uses native Additional CSS instead)
-Simplified architecture for long-term stability
