WordPress CSS Editor Plugins: Customise your Theme

WordPress CSS Editor Plugins: Customise your Theme

While some WordPress themes come with multiple colour schemes or even options panels that allow you to modify their appearance, this isn’t always the case. Once you’ve chosen a theme you are free to edit the code and make changes yourself, however this can often be beyond the scope of some WordPress users, especially those who chose the platform for its reported ease of use.

Thankfully there are a few plugins available which allow you to edit the underlying CSS of a theme in order to modify the appearance of your site, without having to actually edit the CSS yourself by hand. Some of these CSS editor plugins for WordPress allow you to simply click on a page element, such as a paragraph heading, post content area, or sidebar, and then begin changing its appearance using a visual editor. By deploying one of these theme editor plugins you can make light work of customising your chosen theme.

If you want to make changes to the design of your WordPress site, or the site of a client, then one of these plugins can really help you out. Even if you are well versed in editing CSS then a handy visual editor plugin can help speed up your work rate.

Below you will find a roundup of the best options for making it easier to customise the appearance of your WordPress site.

WordPress CSS Visual Editor

CSS Hero

CSS Hero has only recently been released but it’s already made quite an impact on the WordPress scene. The plugin once installed, allows you to edit the appearance of your WordPress site simply by clicking on the element you want to modify and then making your changes.

The editing takes place on the front end of the site so there is no need to go into the code. Non-coders will really appreciate this functionality, while those familiar with coding WordPress themes should find that it enables them to complete their designs faster. While the editing does take place on the front end, visitors to the site won’t notice anything is going on until the changes are made live.

Editors CSS Hero

Using CSS Hero is very easy, simply view your homepage or any other page on your site and then click on an element you want to edit. You can then make the changes using the graphical display. The plugin also has the ability to let you preview your designs on a number of screen sizes to match tablets and smartphones. This is ideal for anyone working with responsive themes. When you are ready to commit your changes, hit save and then they will go live. It really is as simple as that.

The only drawback is that CSS Hero doesn’t work on all themes, at least not without a bit of extra work on your part. However, you can quickly view a list of compatible themes to check before you buy. That page also gives you the ability to test drive CSS Hero on the theme of your choice. As it’s a new plugin the list of supported theme is sure to grow in time.

So far this plugin works with a good selection popular themes and frameworks including Genesis, Thematic, Stargazer, and more. If you are a fan of the Genesis framework and the StudioPress themes then this one will be of interest to you.

CSS Hero Review

Any changes you make to the CSS of your theme using CSS Hero can be exported for use elsewhere on another site. This means you aren’t locked into this plugin if you want to transfer your custom designs to a client site or similar.

When it comes to pricing, there is currently a special launch offer available which gives a 50% discount off both pricing plans. This makes the plugin $29 for use on 5 sites and $99 for use on 25 sites and a year of updates on each.

CSS Hero

Microthemer

This premium theme customizer plugin allows you to easily edit the appearance of the theme you are using on your site. The modifications can be made via the WordPress site itself so there is no need to edit the files on the server or delve into any code.

Editors Microthemer

The plugin claims to work with any WordPress theme and to save you time, there are a number of ‘blank slate’ versions of popular themes available for download. These blank slate theme packs include options for popular themes and frameworks including Genesis, Canvas, and many others. If you want to use a particular theme’s features but give it your own unique twist then this tool is a good option.

This tool goes beyond simply editing colours and font and allows you to modify the layout of the pages provided by your theme of choice.

There are two pricing plans for the Microthemer theme customisation plugin for WordPress. For use on sites you own it will cost you $45 and to use it on client sites you will need to hand over $90. There is also a free 30-day trial available for those who wish to try before they buy.

If you are happy with the overall design of your theme but would like an easy way to tweak it without editing any code, this premium option is well worth exploring further.

Microthemer

CSS Plus

This is a free option that allows you to add your own custom CSS to your WordPress posts and pages. It doesn’t feature a visual editor like the premium plugins above, so you will need to know how to work with CSS.

Editors CSS Plus

The CSS Plus plugin adds an editor to the Add New Post/Page screens in WordPress where you can enter your own CSS. This is inserted into the header of that particular post or page and then overwrites the theme CSS. The code window looks nice and it’s a good option for editing the CSS on an individual post basis. WP Editor is another similar plugin that transforms the post editor page.

CSS Plus

Jetpack Custom CSS

This feature is part of the Jetpack plugin suite that gives WordPress users access to some of the features found on WordPress.com sites. The tool allows you to make changes to the CSS of your theme without the need to create a child theme as it prevents your changes being overwritten when upgrading your theme.

There is no visual editor like the premium plugins but it does have a few features beyond standard CSS editing in WordPress. These include being able to preview your changes before setting them live and also restoring previous versions of your CSS files.

If you are already using Jetpack then it’s a possible option, however it’s probably not worth installing this often maligned plugin for this feature alone.

Jetpack Custom CSS

Conclusion

As you can see from the above options, if you want a graphical interface for editing the underlying CSS of your theme, in order to change its appearance, then you will have to hand over some money and go with either CSS Hero or Microthemer.

CSS Hero has a great interface and the inline editing capabilities of this plugin make it an exciting prospect. However, the current lack of compatible themes makes it a bit limiting. If you are using a non-compatible theme then you can still use CSS Hero but it does require a bit more work on your part. As the goal with these plugins is to open up CSS to users without knowledge of CSS then this might be too much of an ask for some. However, it is a new plugin so it’s defiantly worth keeping an eye on the list of supported themes as it grows.

Microthemer claims to work on all WordPress themes and the blank slate themes are a great idea. It also comes with a free trial so there is no harm in giving it a try with your chosen theme and see how it performs.

How do you go about making changes to the design and appearance of your WordPress site?