After a quick and easy installation you can add your first option.
Accessing Customizer
You can access Customizer either from the front-end using the top admin bar or via Appearance -> Themes. Next to the active theme there is a Customize button; non-active themes have Live-Preview option.
Introduction
The plugin adds two new panels to our front-end editor: Add Section and Add Control.
Add Section allows us to add a new panel to the Customizer sidebar. WordPress doesn’t allow empty sections so while creating a section we need to provide information on the first control as well.
Add Control can be used to extend default sections and add theme-/plugin-specific options to the Customizer sidebar.
Adding Control
The following options are required to configure a new control:
ID – this is the option’s ID. If Customizer has been configured to access serialized options then only the option name should be provided.
Example: if a theme is storing options in my_plugin_options[my_option] only my_option should be provided in this field. my_plugin_options is being pulled from Customizer’s configuration screen.
Label – label that will be displayed above the field.
Example: In the default WordPress section Navigation there is a label Primary Menu.
Type
Currently there are 6 option types supported but the list will grow:
- text – standard input field
- checkbox – tick
- color – #RGB
- image – uses default WordPress media uploader
- radio
- select
Values for radio/select input type
Radio and select boxes currently require following syntax:
value:label, value:label, value:label
If label and value are the same you can simply input:
value, value, value
You can also mix the methods above:
value:label, value, value:label
Adding Section
If you want to keep your options separate from the sections created by default you can add a new section to the side panel. A section requires at least one Control inside, otherwise it will not be displayed.
ID – section needs to have a unique ID. Adding another section with the same ID will overwrite the previous one.
Title – section’s label – what visitors will see
Description – additional information displayed when the mouse pointer is hovered over the seciton title (see default section Navigation or Static Front Page)
Priority – where your section will be displayed
The default sections have the following prioroty values:
| Section | Priority |
|---|---|
| Site Title & Tagline | 5 |
| Header | 20 |
| Background | 30 |
| Navigation | 40 |
| Static Front Page | 50 |
First Control Item – first item is required
Example of a section created with the plugin:
Drop a line in comments below if you have questions or suggestions.
If you want to learn more about setting up options and how Sections and Controls work start with the articles below:
http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/
great work…!!!
Thank you, I hope you will find the plugin useful.
It’s cool. The only thing this plugin requires is a DEMO. This plugin has a potential to become one of those most recognized and substantial one’s. Best wishes for ya with this one
I’ll prepare better documentation after releasing next version of the plugin. And thanks for your kind words!
I like it, but just not 100% clear on how to get those saved options into the theme ?
You can retrieve your options using
get_optionhttp://codex.wordpress.org/Function_Reference/get_option
Ok, I have to admit, this is a great plugin and definitely compliments Otto’s article. But, as one person already asked about, I’m another
Perhaps it might be very helpful to add the Control type documentation with examples of each on how to get the options to display or function in the theme (site) front-end before the next version. Calling (echo) an option for a text type is easy from reading Otto’s tutorial, but what would the code be for the rest of the control types? ie: image, checkboxes, etc? Again, great plugin, just missing the full documentation of what is in it now along with examples. The link to get_options is great, but for a non-techy like me, it’s like a foreign language.
Actually I think I figured it out, still using echo. I took a page from my previous themes using the options framework methods and also being able to turn things on and off using if and else. Now I am really looking forward to your next version…when is it coming out?
AMAZING! Exactly what i was looking for. Only thing missing would be the ability for repeating fields or field sections (example repeating images/captions for headers where user could add images/slides as needed) see advanced custom fields for really awesome implementation of this. AMAZING Plugin and thanks so much for creating it. Looking forward to future pro version which i will gladly pay for!