Make your Theme Hero Ready – Introduction

Making any WordPress Theme Live-Editable with CSSHero

To make CSSHero work on any given WordPress theme, you just need to list  the CSS selectors that identify the HTML elements that you want to make editable.

This configuration can be “passed” to CSSHero in 3 different ALTERNATIVE ways:

Method #1: the easy way, especially if you know what FireBug or the Chrome inspector tool is.

Enter the CSS selectors of the elements you want to edit, one per row, in the Quick Configuration panel:

  • Quick and dirty, very handy for testing if your CSS selectors are wisely chosen.
    This method let you edit ANY WordPress Theme in minutes.
  • A quick introductory video is available to get you started in no time.

This integration method is be largely sufficient to most users.The following approaches can be helpful for limiting the editor powers thus enabling a more customized experience, and is more interesting for developers.

More Advanced Theme Integrations with CSS Hero (for Theme Developers or geeks)

Method #2: the geek way to gain more control and limit properties

  • – Place a customized  csshero.js configuration file inside your active Theme’s directory.
    You will be able to extensively customize the behaviour of CSSHero on each element and property.
    This small file  adds no computational “weight” to the site, as it is not executed unless when user is editing the Theme. You can distribute your theme along with this configuration file.

Method #3: the theme developer way – let your theme be natively hero-compatible and featured in our directory!

  • Let us host a csshero.js  file: once you are really sure that a theme configuration is perfect, you can send it to us  via this form. After a review process, we will happily feature your work in the Hero-Compatible Themes directory.

Tutorial: make your theme Hero-Ready with csshero.js

Making your theme hero-ready will make an incredible difference. Very few minutes of your attention will be sufficient to fully get started. Basic CSS knowledge is required. No PHP to know or functions to add to your theme. CSSHero has a very “low profile” approach on system resources and on the developer. We strive for simplicity, to make you enjoy this product as we do, minimizing the time required to learn how to use this platform.

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.


Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero