Fine tuning how your WordPress site looks on the front-end is faster and easier – not to mention more satisfying – when you can see your changes live as you make them. And the best way to live edit CSS is, of course, with a plugin.
Custom CSS plugins are plentiful in the WordPress Plugin Directory. If you’re looking for a plugin that will generate a custom CSS stylesheet, you have lots of options to choose from. But while there are lots of plugins you can use to create a custom CSS file, there are a lot fewer options if you’re looking for one that pairs a custom stylesheet with a live preview feature.
So after scouring the directory for custom CSS plugins with a live preview feature, I tracked down and tested five of the best. Best of all, they’re all free!
WordPress products company ThemeIsle, along with WordPress wunderkind (and ThemeIsle Support Ninja and Developer) Hardeep Asrani, developed this plugin, whose release WP Tavern announced in early March, 2016.
After installing and activating the plugin, navigate to Appearance > Customize to access the backend Customizer and look for the Advanced CSS Editor menu option. It will appear at the top of the list of Customizer menu options. To edit CSS, simply add a selector and a rule to the text box that appears when you open the Advanced CSS Editor menu item.
CSS rules can be written to apply globally or to target specific devices such as desktop computers, tablets, or phones. As rules are written, the Customizer preview of the website is automatically updated providing a live preview of the edits. If you select the tablet or phone view, the browser viewport will resize automatically so that you can preview the changes as they will appear in a device of that size.
Summary: Slick and powerful with device-targeting capabilities. Use it if you want to target devices of different sizes without being overwhelmed with options.
This plugin from independent plugin developer Bijay Yadav wins the prize for simplest CSS live-edit plugin. Once you install the plugin and activate it, find your way to Appearance > Customize and you will see a Custom CSS tab has been added to the list of Customizer menu items. Open the menu item and you will find a single text box into which CSS rules can be written.
As you write rules into the text box, the Customizer preview will update automatically to reflect the changes. While automatic presets aren’t built into the plugin to target smaller device, the plugin will accept media queries, so you can write styles that target specific viewport breakpoints.
Summary: Dead-simple and lightweight. Use it if you value simplicity over features.
Do you change WordPress themes frequently? If so, this is the CSS editing plugin you’ve been dreaming of.
Install it, activate it, and find it by going to Appearance > Customize. Then select the Custom CSS tab, which you’ll find at the bottom of the Customizer menu.
With this plugin, you can write CSS rules that are either theme-specific or theme-agnostic:
- Theme-specific rules will only be applied to the active theme. Switch themes and you’re given a new blank theme-specific slate to work with, switch back and the theme-specific rules you had written previously will be re-applied.
- Theme-agnostic rules will be applied regardless of which theme is active. Switch themes and theme-agnostic rules will continue to be applied.
You can find out more about the plugin on the Cello Expressions site.
Summary: Easy to use, with a theme-switching feature unmatched by the other candidates on this list. Use it if you switch themes frequently and want to be able to write theme-specific and theme-agnostic CSS rules.
By far the most feature-packed plugin on this list, SiteOrigin CSS is surprisingly powerful considering it’s free.
This plugin is the only one on this list that doesn’t use the Customizer (Appearance > Customize) to power a live preview feature. After installing and activating the plugin, go to Appearance > Custom CSS to access the plugin’s stylesheet. On that page, you will see a text editor that does not include a live preview.
To access the live preview, click on either of the two buttons that appear on the right, just above the text box. The button with the eye icon will open up an easy-to-use visual CSS editor that non-technical designers will appreciate. The icon with the expanding arrows is a stripped-down version of the visual editor that requires you to manually write CSS rules.
The visual CSS editor provides a set of controls that make it easy to adjust a wide variety of text, decoration, and layout options without needing to know very much CSS syntax. Of all the CSS editors on this list, the visual editor mode of the SiteOrigin CSS plugin is the most user-friendly for non-technical WordPress users.
To edit an item using the visual CSS editor, start by clicking on the element you want to edit. Then adjust the element attributes using the available text, decoration, and layout options. Changes are previewed as you make them.
If you prefer to edit CSS manually, select the expanding arrows icon rather than the eye icon from the Appearance > Custom CSS page.
This preview mode works the same as the visual editor mode with the exception that CSS rules must be manually typed into the text area on the left-hand side of the browser.
Both preview modes allow you to pinpoint a suitable selector by clicking on any item on the page and then picking from one or more suggested selectors, listed in order of decreasing specificity, which appear in a pane at the bottom of the editor preview screen.
For example, in the image on the right, I clicked on Hello world! and the plugin suggested four possible selectors that could be used to target the element.
Clicking on any of the ids just above the suggested selectors would create an even more specific selector.
This plugin also maintains a history of CSS revisions so that you can revert to a previous version of saved CSS rules if you ever need to.
While there are a lot of reasons to like this plugin, there are two areas which could be cited as needs improvement.
- Not all of the available options in the visual CSS editor are very intuitive. For example, the Font Family and Text Shadow options are just empty text boxes. If you know CSS syntax, these aren’t too difficult to figure out. However, if you don’t know CSS syntax, figuring these options out may pose a challenge.
- There is no option to write CSS rules to target devices of different sizes like the Advanced CSS Editor. This may seem like splitting hairs, but considering how easy-to-use this plugin is, it’s worth pointing out that you will have to manually write media queries to target viewports of different sizes – a task many non-technical users would prefer to avoid.
Summary: Full-featured and powerful. Use it if you need to make a lot of changes and want a plugin that makes it easy to write custom CSS without having to actually write any CSS.
This free plugin comes from WordPress theme dev agency themejunkie (but you can call them TJ). After installing and activating the plugin you’ll be able to add custom CSS in two different places:
- A text editor located at Appearance > Custom CSS, complete with color-coded syntax suggestions.
- In the Custom CSS Customizer menu item, which you can access by navigating to Appearance > Customize.
When using the Custom CSS menu item within the Customizer, styles are automatically applied to the Customizer preview. However, if you want to debug your CSS, switch over to the text editor view which includes color-coded cues to help to locate and correct unclosed rulesets and other syntax errors.
Summary: Easy to use with a built-in syntax-highlighting text editor. Use it if you want a simple, lightweight plugin that will help you locate and correct CSS syntax errors.
And the Best Live Editing Plugin Is…
I can’t pick a favorite. Each of these plugins will appeal to a different type of designer and will be best-suited to tackle specific CSS coding tasks.
Have you used any of these plugins? What worthy live-editing custom CSS plugin did we leave off of the list? Let us know in the comments below.