Have you ever wished you could just click on any element of your WordPress theme and edit the CSS style of it, with the ability to see the changes you make immediately – all without having to write CSS code? Or maybe you don’t actually mind a little coding, but you still wish you could see the changes you make without having to edit, save, refresh, see how it looks, edit, save, refresh, see how it looks, again and again. Two WordPress plugins aim to make all your CSS editing wishes come true. Today, we’re going to put both to the test in a showdown between Microthemer and CSS Hero.
Both of these CSS visual editors are simply amazing, and both have basically the same great features. But what I wanted to know was how well they worked, how intuitive they were to use, and which one would achieve a small set of goals more quickly and easily. To decide this, I created two WordPress installations on my local computer, and installed and activated CSS Hero on one, and then installed and activated Microthemer on the other. I then decided which theme I would attempt to customize and which elements of the theme I would change. I created a screencast of each process so you can follow along.
First, let’s do a little feature comparison.
CSS Hero Features, Pricing, Pros and Cons
CSS Hero has this to say about itself:
Easily customize WordPress themes, live.
CSS Hero is the definitive WordPress plugin to easily customize every property of your themes with an easy and intuitive point and click interface. CSS-Hero allows full control on every element of a number of natively Hero-ready WordPress Themes.
(emphasis is mine)
* Each plan expires 1 year from the purchase date. At the end of that period, CSS Hero will continue working, but you will not be able to install CSS Hero on NEW (other) sites.
* Its easy export feature allows you to export all your edits and use them without CSS Hero.
CSS Hero Pros:
* Device-specific customizations (phone, tablet, desktop)
* 400+ Google fonts
* Edit history
* Click Show Generated CSS to copy/paste the CSS into your own stylesheet if you don’t want to use CSS Hero any longer.
CSS Hero Cons:
* Works ok on hero-ready themes, but pretty flaky on others. Rocket Mode (in beta) aims to solve this, but it’s still extremely buggy.
* Hero-ready doesn’t mean 100% editable either. It all depends upon how much effort was put into creating the hero-ready file and how many elements were made “ready” for the particular theme.
Microthemer Features, Pricing, Pros and Cons
Microthemer has this to say about itself:
Microthemer is a code-free visual theme and plugin editor. Double-click any aspect of your site. If you can see it, you can style it. Originally built for non-coders, but many coders use Microthemer to generate the CSS they’re tired of rewriting. Use it to customize any WordPress site, no need to pre-configure.
Please Note: Themeover will honor the free upgrades for life for all customers who purchase Microthemer while they are still advertising this offer (i.e. at least at the time of the writing of this post). In the near future, they may switch to an annual licensing model with paid upgrades each year. (So get this now, so you will be guaranteed to be grandfathered in!).
* Customize ANY theme or plugin even! (Ever wanted to style a Contact Form 7 form, for instance?)
* View in different device modes (desktop, tablet phone)
* Cross-browser styling (even IE6!) with the use of CSS3 Pie
* Browse Google fonts and add with a click, but Microthemer only downloads the ones you use.
* Edit history
* You can deactivate or completely uninstall Microthemer and still use the styles you created by manually calling the microthemer stylesheet via your functions.php file.
* Have to organize a little – name each selector and put it into a folder of your choice.
The Battle Parameters – Which Theme / What Am I Changing?
Since CSS Hero claims that it can edit 99% of the default WordPress Twenty Fifteen theme, I decided to use that theme for this battle. When thinking about which elements I wanted to style, I hit upon the bright idea of using Matt Cromwell’s child theme as my guide. If you don’t know Matt Cromwell yet, you should definitely add him to your list of people to follow. He is one of my favorite WordPress developers because he is simply a really nice guy who creates and shares interesting WordPress development “stuff”. He created a Twenty Fifteen child theme, which you can see and download for free here. The demonstration you’re about to see will only attempt to make the default Twenty Fifteen theme look similar to Matt’s child theme, but his child theme comes with a lot more cool features, so be sure to check it out and download it. The few changes I’ll be making in this demonstration won’t do his theme justice at all, but it’s enough to show the strengths and weaknesses of CSS Hero and Microthemer.
Ok, enough of the preamble. Below are two screencasts. The first is my attempt to make a few edits using CSS Hero, and the second is my attempt to make the same edits using Microthemer.
CSS Hero Test
So Who Wins The Battle of the CSS Visual Editors
You do! Ok, that’s a cheesy answer. In my mind, Microthemer has the better experience, accomplished the tasks, and the price is quite a bit better than CSS Hero as well. CSS Hero let me change hover states slightly more quickly than Microthemer did, and I shaved a minute off the total time it took, but I could never get CSS Hero to recognize the entire sidebar, so I could never completely change the sidebar background with it. That was a major problem. Faster is good, but if it can’t handle a basic task, then speed doesn’t really matter.
If I had to choose just one, I’d go with Microthemer, but CSS Hero has a lot of enthusiastic users, so it may be better for you. (I own both – pro and developer versions – by the way). Also, this was simply my experience with using each plugin on one particular theme. Both might do better or worse on a different theme, or when used by someone other than myself. So, while this little test may be influenced by my abilities, my limited experience with each of the products, and by my theme choice, I believe it will still help you make a better decision. No matter which you choose, or which suits you best, you’ll end up with a fantastic way to style themes just the way you’ve always wished you could!
UPDATE: SITEORIGIN CSS – THE ALWAYS-FREE PLUGIN BEATS ‘EM ALL!
While the plugins above are really good, frankly, now that SiteOrigin has come out with its new plugin, called SiteOrigin CSS, I would recommend you get it instead. It works beautifully, and it is completely free. Did I mention it works beautifully? It really does. Wow, I love this thing!
* Affiliate links are used, but my opinions are totally free, and free of influence, so stop judging. 🙂