Customizer Section

Customizer controls should be neatly organized in appropriate customizer sections.

Every section needs a unique section id, for example “header_settings” and a human friendly title that will be shown in the Customizer UI, for example “Header settings”.

Adding fields into sections

There are two ways of placing a Customizer Field into a section:

By adding Customizer Section on one of their parent elements

All Customizer fields under the element with Customizer Section action will be placed in the customizer section, unless they explicitly specify a different section.

For example, let’s say we have the following <header> structure:

header             <— Customizer Section "header", Field "bckimage"
    h1 The title   <— Field "title"
    p Description  <— Field "description"

Fields “bckimage”, “title” and “description” will all be placed into the “header” section.

Using the Section setting on Customizer Field

Another way of placing field controls into sections is by explicitly listing the section id in the Section setting of the Customizer Field action.

If Section is set then the field will be added to that section regardless of any Customizer Section actions on its parent elements.

Prefixing section id to fields

Checking “Use section is as prefix for enclosed fields” will prefix the section id to all field ids of enclosed customizer fields, in the format <section_id>_<field_id>.

That’s a powerful way of creating reusable customizable blocks.

If we use “Use section is as prefix for enclosed fields” on our example from above:

header             <— Customizer Section "header", Field "bckimage"
    h1 The title   <— Field "title"
    p Description  <— Field "description"

The actual field ids of controls will be:

header             <— "header_bckimage"
    h1 The title   <— "header_title"
    p Description  <— "header_description"

When we duplicate the block, we just need to update its section id and all enclosed customizer fields will automatically get block-specific unique field ids.