If you wish to customize your WordPress theme, then unless it has a live editor built-in then you would need to have some knowledge of CSS which is how the visual look of themes are constructed. A Stylesheet contains the CSS rules which govern your site’s layout, colors, font choices and so on and can be a little overwhelming for beginners to understand which rules cover which parts of the site and so on. A new plugin called CSSHero aims to change that by allowing you to visually edit any theme once the plugin is installed on the site, it includes features such as :
- Point & Click Interface
- Device Mode Editing ( for mobiles & tablets)
- Color Picking
- Font Options
- CSS styles for Gradients, Box Shadows & Text Shadows
- No Lock-in, Export your Styles
- Edits History
This sounds like a very promising plugin so let’s take a look at how the plugin works in reality and how easy it is to actually edit a theme in real-time.
Install The Plugin
After downloading and activating the plugin, you will see a message which prompts you to get a license key on the CSSHero site.
Clicking the “Get my Key Now” button will transfer you to the site where you can activate the license for the site you have the plugin installed on.
Customizing Your Theme
Once you have the plugin installed and license key activated you start live editing of your theme, visit the front-end of your site and you will see a blue button in the top right hand corner which loads up the editor – this is only viewable by site admins.
If you click the blue button, a menu will open with links for the following :
- Main Editor ( click this to begin editing )
- Device Mode ( choose desktop, tablet or mobile )
- History
- Presets ( Save and Load )
- Tools
- Share Buttons
- Full Screen Mode
- Close Editing
To start editing your theme, click the top “Editor” button and you can hover your mouse over any element or area on the page which will then be highlighted, to edit it you click on the area and it will load some options in the right bar.
You can then begin editing your theme – changing background colors, font sizes, colors and so on – everything in the CSS is editable and you can save or leave the changes as you go.
Here you can see how I was able to quickly change the TwentyTwelve theme by playing about with the controls, this took me a couple of minutes – to achieve this by editing the CSS by hand would have taken a lot longer as you would have to look up each element’s name and find it in the stylesheet and then manually change the value.
Once you are done editing all your styles, click “Save” to store them. If you wish to save the CSS that has been generated you can click the “Tools” > “Show Generated CSS” and an overlay will appear with the CSS styles needed for your changes. You can copy and paste these into a child theme for your site and then you will no longer need to have the plugin activated.
Compatible Themes & Plugins
There is a list of compatible themes and compatible plugins listed on the site so you can be sure if you are using one of those the live editor will work fine, if you are using a theme not listed there are a few more steps needed to edit the theme, you can read through them on the documentation here. I was pleased to see one of my themes Blogly included on the site:
Pricing
Pricing is quite reasonable for this plugin, one site costs $ 14 for a year, 5 sites are $ 29 and 999 sites are $ 99 for the developer plan. You have one year to activate the plugin on the site but you can use the editor forever.
Conclusion
This is a great plugin – it feels very polished, from the website to the plugin interface you can tell it has been designed and built to a high standard so that is very reassuring. To use, the plugin worked absolutely fine – everything was very straight forward and very easy to make the required edits. Adding padding to elements and changing margins etc felt very slick with the changes happening in real-time with the ability to also type in a value to get elements to line up exactly as needed.
I can see this being of benefit to beginners who do not want to delve into CSS code to make theme changes but I also see it being of great help to developers or “theme customizers” as you can make changes a lot quicker then hunting down element names in a stylesheet and then just saving out the code and adding it to a child theme, it should really speed up the process of customizing a theme for your clients.
The price point feels right, $ 14 for a single site is well within the budget of most small site operators and the $ 99 is suitable for someone who is going to be using this a lot for clients.