Working with Customizer

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.
access plugins front-end

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.

access customizer front-end

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

How to add a sectionCurrently 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

 

adding customizer section

Example of a section created with the plugin:

Section added with our WordPress 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/

 http://codex.wordpress.org/Version_3.4

10 thoughts on “Working with Customizer

    • I’ll prepare better documentation after releasing next version of the plugin. And thanks for your kind words!

  1. 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?

  2. 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!

Leave a Reply