Live CSS Preview
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.
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.
- 01Upload the live-css-preview folder to the /wp-content/plugins/ directory.
- 02Activate the plugin through the ‘Plugins’ menu in WordPress.
Frequently asked questions.
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)
