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 several of the best. Best of all, they’re all free!
Continue reading, or jump ahead using these links:
Customizer Custom CSS
The Customizer Custom CSS 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.
Modular Custom CSS
Do you change WordPress themes frequently? If so, the Modular Custom CSS 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.
SiteOrigin CSS
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.
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.
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.
Tags:
