This document describes how to easily customize WordPress themes and plugins using CSS Hero. CSS Hero allows non-technical users to customize elements on a site using a WYSIWYG interface without any coding knowledge. Themes and plugins can be made customizable by adding a csshero.js file that declares elements to customize. This file uses CSS Hero's API to automatically generate configurable sections. Dynamic configuration is also possible by using jQuery to programmatically declare elements based on conditions.

1. Easily Customize WordPress Themes (and Plugins)
csshero.org

2. - WYSIWYG
- Very light overhead
- No learning curve
- Easy to extend

3. csshero.org/themes
csshero.org/plugins

4. My Site Title

5. THEME > CONFIGURATION > CSS HERO

6. THEME > CONFIGURATION > CSS HERO
Shared
(Hero-Ready)
csshero.js file
(local configuration file)
Quick Config
(useful to add elements on the fly from frontend)

7. Shared
(Hero-Ready)
Hosted on the CSS Hero cloud
All users can use it on Hero-Ready
ThemesPlugins

8. csshero.js file
(local configuration file)
Hosted locally in the root theme folder
Users can provide their own configuration

9. csshero.js file EXAMPLE
(local configuration file)
function csshero_theme_declarations(){
// DECLARATIONS HERE
}

10. csshero.js file EXAMPLE
(local configuration file)
function csshero_theme_declarations(){
// DECLARATIONS HERE
csshero_declare_item(’#header’,’Header’);
csshero_declare_item(’#header .logo’,’Header Logo’);
csshero_declare_item(’#header h1’,’Header Title’);
csshero_declare_item(’#header h1 a’,’Header Title Link’);
}

11. CSS HERO API
a useful set of helpers
csshero_declare_item(scope,description);
csshero_config_sidebar(scope,inner_scope,prefix);
csshero_config_post(scope,inner_scope,prefix);
csshero_config_menu(scope,ulscope,prefix);
csshero_config_comments(scope);
csshero_config_respond(scope,innerscope);

12. Each API function
will load a set of config elements
based on WP standards
csshero_config_sidebar(’#sidebar’,’.widget’,’MySidebar’);
// WILL OUTPUT SOMETHING LIKE THIS:
csshero_declare_item(’#sidebar’,’MySidebar’);
csshero_declare_item(’#sidebar .widget’,’MySidebar Widget’);
csshero_declare_item(’#sidebar .widget input#s’,’MySidebar Search’);
// [...]

13. Dynamic Configuration,
Hero speaks jQuery!
function csshero_theme_declarations(){
// DEFINE CONTEXT
frame = window.frames['csshero-iframe-main-page'].document.body;
jQuery(’.MyItem’,frame).each(function(){
id = jQuery(this).attr(’id’);
// FIRE!
csshero_declare_item(’.MyItem#’+id,’My Item ID#’+id);
}
}