Customize plugin

Ce plugin n'est plus maintenu et ne sera pas porté pour wordpress 3.0. Si quelqu'un veut continuer le développement, contactez-moi.

Download v1.0.5Provides css based customization for themes. This plugin lets users customize their theme easily, and themers provide customization options just by adding some special comments in css. Freshy 2 is the first theme to provide support for customize.

For users :

Easily customize your theme by changing images, colors, elements sizes, fonts or anything the theme provides customization options for.

Download the plugin, place the customize folder in your wordpress plugins folder, and then activate the plugin. A new tab will appear when you go to "Presentation", named "Customize Theme", providing options for your theme if it is compatible.

For themers :

You made a great looking, neat and sweet theme ? Would not you like to let users change some colors, backgrounds, sidebar width or make layout whether liquid or fixed ? Grr making that stupid form, saving those database entries, hey i'm just a css coder man ! Cool, this is exactly for you, then, just see :

This code :

a {
    /*:Navigation color*/
    color:#ff6600;
}

Gives a customize form with :

Some explanations : You must create a separate css named "custom_template.css" in your theme folder. Write this little css snippet in it. You just saw that comment in the css, above the color property ? That's the only thing you need : add a comment beginning with ":" and then add the name you would like to give to the property. Here i chose "Navigation color", but it could have been anything else.

With this only comment, and if the Customize plugin is installed and activated, then the user will be able to change this value in the Customize panel, with a cool color selector.

Another example ?

body {
    /*:Header image*/
    background-image:url(images/headers/bubbles.jpg);
}

Adds to the form :

It's magic ! A list of images to choose from is provided to the user. In fact, those are all the images located in the "images/header" directory. When the user hovers an image, a zoom preview appears. It is also possible to upload an image. This example also shows that css shortcuts, eg. "background:..." are NOT allowed, since we need single property-value pairs. Use "background-image", "background-color"...

Yet another ?

#title_image {
    /*:Header height*/
    padding-top:200px;
}

Adds to the form :

Sliders are provided for all length values. User can also choose between px, em or %, which is great for example to switch between liquid or fixed layout.

But hey, wait a minute ! What if i do this :

a {
    /*:Navigation color*/
    color:#ff6600;
}
.sidebar h2 {
    /*:Navigation color*/
    border-left-color:#ff6600;
    /*:Navigation color*/
    color:#ff6600;
}

No worries, all of this will be handled by the plugin, you can even mix classes, mix properties, names, whatever, only one field will be output. It will work ok since you did add the special comment before the property-value pair.

Note that any property will work, providing a specific input widget or a simple input as a fallback.

Besides this, you can provide additionnal sub-themes with your theme. They can be some preset to choose from, or completely different css to provide additional properties or a different layout. Just add some css files with names beginning with "custom_" and use the same rules as for custom_template.css. These stylesheets will appear as a select box in the Customize panel :

Users can also save their own settings. In fact they have to, that's the way settings are applied :

If for some reasons the user can't write files, values are stored as variables. Note that i did not test this extensively so let me know if you succeeded or failed.

Changelog :

1.0.5 01/08/2010
Compatible with Wordpress 2.9
1.0.4 04/25/2009
Compatible with Wordpress 2.7
1.0.2 08/03/2008
Compatible with Wordpress 2.6
1.0.1 02/03/2008
Corrected floats in sizes fields