Build a Theme Options Panel — Tutorials — Pure Metafields

Docs/Tutorials/Build a Theme Options Panel

Build a Theme Options Panel

No code this time — a real panel with a tagline and an accent color, built visually, with the color wired to output CSS automatically.

  1. Create the panel

    Go to Pure Fields → Option Builder → New Panel. Start blank. Set the panel title to Theme Options and give it a menu icon under Panel Settings.

  2. Add a section and two fields

    Add a General section. Drag in a Text field labeled Site Tagline, and a Colorpicker field labeled Accent Color with a default of #3362FF.

  3. Wire the color to output CSS

    Open the Accent Color field's editor and add an Output rule: selector a, .btn-primary, property color. Turn on Output CSS in Panel Settings.

  4. Save

    Click Save Panel. It appears immediately as a live admin page. Fill in both fields and save again.

The Pure Metafields Option Builder editing the Header Main section, showing the section navigation and option fields
What the builder canvas looks like once a section has a few fields in it. Full tour of every control: Builder Documentation → Option Builder.

Use it in a template

PHP · header.php
$tagline = tpmeta_get_option( 'site_tagline' );
if ( $tagline ) {
    echo '<p class="tagline">' . esc_html( $tagline ) . '</p>';
}

You won't need to read the accent color in PHP at all — with Output CSS on, a, .btn-primary { color: #3362FF; } is already printed into <head> for you.

Next

Mirror this panel into Appearance → Customize so clients get a live preview — see Integrations → Options Pages. Or reuse this exact panel on another site — see Move Data Between Sites.