Option Builder — Builder Documentation — Pure Metafields

Docs/Builder Documentation/Option Builder

Option Builder

Create a panel, add sections/rows, drop fields, configure each one, save. A worked example of the same panel this page builds: Tutorials → Build a Theme Options Panel.

  1. Create a panel

    Go to Pure Fields → Option Builder → New Panel. Start blank, from a starter template, or import existing code (see Migrate from Kirki / Redux). Set the panel title, menu slug and icon under Panel Settings.

  2. Add sections, rows & fields

    A panel holds sections (tabs); each section holds rows; each row holds fields in a 1–4 column grid. Click Add Field, pick a type, and configure its Label, ID, default, options and conditional show/hide rules.

  3. Optionally output CSS automatically

    Color, typography, spacing, dimension and gradient fields can carry Output CSS rules (selector + property). With the panel's CSS output on, the saved value is injected into <head> on the front end — no template code needed.

  4. Save & (optionally) show in Customizer

    Save to persist the panel. Turn on Customizer integration in panel settings to mirror it into Appearance → Customize — see Integrations → Options Pages.

Pure Metafields admin screen: panels list
Your option panels. Each card shows its opt_name, section and field counts. Kirki Import / Redux Import sit top-right; New Panel starts a fresh one.
Pure Metafields admin screen: template modal
Creating a panel. Start blank, load a ready-made template (Theme Options, Turie), or drop a previously exported .json panel file to restore it.
Pure Metafields admin screen: builder edit
The builder canvas. Sections on the left, the rows/columns grid in the middle, and the draggable Field Types palette on the right. Import, Export and Bake to PHP live in the top bar.
The Pure Metafields Option Builder editing the Header Main section, showing the section navigation and option fields
A Pure Fields option panel. Sections list down the left; each lays its fields out in rows — here an image picker, a dimension slider, a switch and a select.
Pure Metafields option panel showing a switch toggle and two colorpicker fields in the Back To Top section
Switch & colorpicker fields. The Back To Top section pairs an on/off switch with two colorpicker fields — read with tpmeta_get_option().
Pure Metafields option panel showing a responsive typography control, font-source buttonset and switches in the Breadcrumb section
Typography, buttonset & switch fields. The Breadcrumb section: a responsive typography control (Desktop / Tablet / Mobile), a font-source radio_buttonset, and on/off switches.
The Pure Metafields Option Builder Edit Field modal for a switch field, showing the ID, description, string or boolean value format, default and conditional rules, with the Field Types palette on the right
The field editor. Editing a switch field — its ID (the theme_mod key), description, stored-value format (string on/off or real boolean), default and conditional show/hide. The Field Types palette is on the right; section navigation on the left.
Pure Metafields admin screen: panel settings
Panel settings. Set the opt_name, menu slug, field-ID prefix, menu icon, position and capability — and tick Customizer integration to mirror the panel into Appearance → Customize.
Repeaters

The repeater field lets editors add unlimited rows of sub-fields (text, color, image, gradient…). It is fully supported in both builders and in the Customizer. Reading it back: Developer Guide → Helper Functions.