Description
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.
Installation
- Upload the
live-css-previewfolder to the/wp-content/plugins/directory. - Activate the plugin through the ‘Plugins’ menu in WordPress.
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
livecssclass 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 endMigration
-Automatically migrates existing Live CSS data into Additional CSS on update
-Ensures no CSS is lost during upgradeImprovements
-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 efficiencyCleanup
-Removed redundant Customizer editor (uses native Additional CSS instead)
-Simplified architecture for long-term stability
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Live CSS Preview” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Live CSS Preview” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.