When someone lands on your website, they’ll likely give it a quick eye test to see if they can trust it.
In fact, a study from the Nielsen/ Norman Group seems to confirm, at least tangentially, that users immediately screen a site to decide whether it’s trustworthy or not. If a site passes the initial screening, the user will explore the site in much more detail.
If trustworthiness is indeed a factor, it follows that the look and feel of your site is a huge factor in keeping readers on your site.
This is where CSS editor plugins come in.
CSS is a real pain in the ass. It’s fidgety. Everything has weird names. And it’s even weirder if you don’t code.
CSS editors allow you to point and click on the section you want to edit, add your CSS and see the results in a live preview immediately so that you do not have to switch between views.
But what’s the best CSS editor plugin for WordPress? Let’s explore that question in a bit more detail.
What Are We Looking For In A CSS Plugin?
1. Click to Select
Click to select = the ability to click on an element to edit the CSS rather than using the CSS selectors.
One of the most frustrating parts of CSS is understanding which identifier coordinates with which element. This is compounded when elements are nested within each other.
It’s easy to edit a smaller section, a larger section, or even the wrong section all together.
I’m looking for a plugin that allows me to click on the element I want to edit and add the CSS.
On top of this, I don’t want to write the CSS myself. Ideally, there will be a wizard with a series of options, and I can simply change what I want (e.g. colors, line height, font).
From here, the plugin will generate the CSS.
What we want
- Click on an element to add CSS to it
- Wizards to add CSS without writing code
2. Live Preview
Live preview = the ability to see the changes as you make them without refreshing the page.
Making edits in WordPress always has me tearing my hair out.
Make a change, save it as a draft, preview the changes, go back into the draft, make more changes, save the draft again, preview again.
Repeat for what seems like a bajillion times.
I can’t live like this!
I want a plugin that shows me a live preview.
When I make a change, I want to see what it’ll look like on my site immediately. This gives us more scope to make minor adjustments until the site looks perfect.
In addition to the live preview, I’m also looking for the plugin to have version history.
Everyone who has ever played with CSS in the past knows how easy it is to make a complete mess of your site. They also know how hard it is to get it back to a level where it looks normal again.
Version history will allow us to overcome these issues by restoring the site to an earlier version.
What we want
- See changes live as we make them
- Version control
3. Theme Compatibility
Theme Compatibility = works with all themes that comply with WordPress coding standards.
The plugin has to work with a wide variety of themes.
It’s especially important to people who have multiple sites with different themes. Most people with more than one site will try to keep things like plugins and tools consistent even if they are using a different theme.
It can take time to learn how to use a plugin. I don’t want to waste time learning to use 3 different image compression plugins or member management plugins or CSS plugins when I can use one across three sites.
It doesn’t matter how good the plugin is, if I can only use it with one of my sites. The chances are that I’ll find a plugin with fewer features but better compatibility.
What we want
- CSS plugin that is compatible with
4. Mobile Responsive
Mobile responsive = CSS works across all devices or allows different views for different devices.
We’re living in a time where mobile traffic is greater than desktop traffic.
Now that Google have begun to roll out the mobile first index, it’s crucial that all sites work perfectly on mobile.
The attitude in the past has been ‘as long as it looks ok on mobile’ we’re fine. Well, it’s time to turn this on its head. It should be: ‘as long as it looks ok on desktop it’ll be fine.’
We’re looking for a plugin that makes it easy to make changes to the site when a user comes on mobile.
What we want
- Mobile responsive CSS
- Device specific CSS and live previews
5. Value for Money
As with all WordPress plugins, we’re looking for the plugin has the functionality we need for the best possible price.
At times, there may need to be compromises if the best plugin is too expensive.
On the other hand, there may be two plugins that look as good as each other on paper but one is much easier to use or just does everything a little bit better.
In this case, it may be worth the extra money for the more polished plugin.
The Best CSS Editors for WordPress
SiteOrigin is a company with a number of themes and plugins for WordPress.
Their CSS plugin, SiteOrigin CSS, is arguably the most well known of all of their products. There’s good reason for this: it’s a very good plugin.
When you install it, you’re presented with a blank page.
If you didn’t know what to do, you’d be forgiven for thinking the entire plugin was just an area for you to write CSS code. However, if you do know what to do, you’ll know to select the eye in the top right hand corner. This will take you to the visual editor.
When you’re in the visual editor, it’s easy to select the area you want to edit.
By hovering over an object, it will highlight what you are selecting so that you can understand the selector of each individual element. It also highlights objects that are grouped together (e.g, if you are hovering over a div with multiple elements.)
Once you’ve highlighted what you want to edit, simply click and the hierarchy will show in the ‘inspector’ box at the bottom of the page.
The smallest selection will be at the top of the page with the largest selection at the bottom.
Whenever you make a change, SiteOrigin CSS will show you the changes immediately. This is because the visual editor is simply a live preview tool with a different name.
If you’re not a CSS newbie and know what you’re doing, you can type the CSS code directly into the plugin.It will provide a live preview in the same way as the visual editor does.
The plugin also works with any WordPress theme. There’s no site specific framework or short codes, it simply generates pure CSS.
Version history is included with the plugin but it’s not within the visual editor. To access this, you need to go back to the SiteOrigin CSS homepage in your WordPress backend. Here you’ll find a full version history.
The only downside I can see with SiteOrigin CSS is the lack of emphasis on mobile. The only way to see what your responsive site looks like on other devices is to scale the window yourself.
As you can see above, if you scale the page, your site will adjust to its mobile responsive form. This makes things a little bit more difficult to work. It’s not the end of the world but it’s still a little annoying.
Other than that minor hiccup, SiteOrigin CSS is a really great option. It does everything that we need it to do and it does it well. The even better news is that it’s free. No freemium. o pro. 100% free!
I’m always wary about using these plugins as there can be a lack of support when needed. These plugins are less likely to be updated regularly to keep up with updates to WordPress itself. This could have security implications or simply lead to the plugin not working.
As you can see, this plugin has not been updated within the last year. This sets off alarm bells straight off the bat.
Now, onto the plugin’s functionality. With this plugin, the clue is in the name. This is not a plugin for beginners, it’s an advanced CSS editor. There’s no wizard, no click to select. If you don’t know CSS you are screwed.
However, if you do know CSS, it could be a reasonable option as a live preview tool.
As with SiteOrigin CSS, it’s a pure coding tool. Nothing fancy. This means it’s compatible with any theme on WordPress.
Having said this though, when playing with the tool, I found that certain things were not working.
For example, I was playing with the line height. I found that it was not changing. My theory is that it was being overwritten by the theme default but it may just be down to my extremely poor CSS so I would take this section with a pinch of salt.
Where Advanced CSS Editor really excels is with the mobile responsive aspects. You can create global CSS, CSS for desktop only, tablet only or mobile only. As you can see in my crude example below:
However, the plugin falls down again when it comes to version history.
It doesn’t have it, and that, of course, is a problem. It’s not a big one, but it is a problem.
The redeeming feature of Advanced CSS Editor, though, is its price. It’s free.
In reality, Advanced CSS is a basic live preview CSS editor that incorporates some good features for mobile responsiveness but not a lot else.
Having said that, if you’re experienced with CSS and want a basic tool for coding with a live preview and decent mobile options, Advanced CSS Editor could be worth considering.
First impressions are that this is a slick operation. The website looks great and immediately makes me think it’s the real deal. But how does it stack up against our criteria.
When playing with the plugin, my feeling is that it is a slicker version of SiteOrigin CSS. The click to select and live preview functionality is very similar. The difference comes when it is time to decide which element in the hierarchy you actually want to edit.
CSS Hero articulates the option in plain language that the user can understand. SiteOrigin simply pulls the section identifier and leaves it up to the user to figure out what they are editing.
Once you’ve selected what you would like to edit, the are plenty of options. I would suggest these are the same options that are available in SiteOrigin but are better presented.
If you choose to edit text, for example, you’re presented with a bunch of options. Rather than having you input values, CSS Hero limits the mistakes you can make and presents you with all the available options.
If your knowledge of CSS is minimal, the tool is almost as powerful as it would be in the hands of a CSS expert.
It does this by using dropdowns, sliders and radio buttons to limit/ validate your inputs.
This is very effective in both limiting mistakes from users and making the full array of options in CSS accessible.
When it comes to being mobile responsive, CSS Hero also has you covered. You can resize your site as:
- Mobile or tablet
- Landscape or portrait
- Default desktop mode.
At the moment, I’m only using a demo version of CSS Hero but from the documentation it seems like you can make global edits or desktop only edits.
It also has revision history that allows you to roll back your changes once you realize that your site looks horrible.
The only clear downside I can see with CSS Hero is that it’s not compatible with every theme. There is a list 77 themes it is compatible with on their site.
Finally, the price. CSS Hero is not free but a single site license will only set you back $20 per year. This doesn’t exactly break the bank.
It seems to me that CSS Hero is a much more polished version of SiteOrigin CSS with a little bit of additional functionality thrown in.
To access the edit options, you need to be signed into WordPress, go to your page in the front end and select the Microthemer option from the WordPress menu. This will take you into the live preview mode.
Here you can use the target option in the top left corner to click on an element to edit.
When you hover over the desired element, a + sign will appear in the top left corner. This presents you with the hierarchy options.
Unlike CSS Hero, you are simply presented with the IDs rather than the plugin understanding the purpose of the element and translating it into plain text.
Now it’s time to make the edits.
Personally, I hate the layout. The icons aren’t intuitive. You have to hover over them to understand what they do.
Having said that, in the same way that CSS Hero does, Microthemer does a good job of presenting your options in a way that makes CSS more accessible.
Another negative is when you make a change, it’s slow to update.
In fact, it was driving me crazy.
I was using the plugin on an old test site that still has Thrive Content Builder installed. Some of the issues I was experiencing may have been due to some conflicts there. However, it was still painfully slow.
On the plus side, there are options to create custom CSS across multiple devices and this works just as well as the default ‘All Devices’ area.
Finally, we get to the price. The paid version will cost you $27 per year, but to be honest, the only additional feature this seems to get you is animation. I feel like I can live without that. So, in all honesty, I would probably just stick with Microthemer Lite.
Overall, I didn’t love it. It was the only plugin out of them all that actively annoyed me while I was using it.
How Do They Compare?
|Plugin||Click to Select||Live Preview||Themes||Mobile||Price|
Which Plugin Should You Get?
For me there’s a clear winner – CSS Hero.
It’s a really great plugin. It does everything that you would want it to do and is so well designed that it allows you to squeeze everything out of CSS, even if you’re a newbie that doesn’t know all of the available options.
At $20 per year, I think it is great value for money – even when you put it up against free options.
There are only two reasons I would choose another plugin –
- I want a free option
- It doesn’t work with my theme
In these cases, I would plump for SiteOrigin CSS. It really is a solid alternative to CSS Hero but the major drawback is the lack of mobile specific functionality.