Options Page Builder

Create custom admin pages with settings panels to store site options, configuration data, and custom settings. Build theme options, site settings hubs, or consolidate scattered plugin settings—all without writing code.

Use Cases#

• Create a centralized options page for clients to manage social media links, contact info, and business hours
• Build a custom theme settings page for colors, layouts, and features
• Consolidate scattered settings into one organized admin page
• Store site-wide configuration that doesn’t belong in post meta

How It Works#

1. Go to Switchboard → Options Page Builder
2. Click Create New Page to start building
3. Configure page settings (title, menu location, icon)
4. Add fields using the field builder
5. Use Groups to organize fields into sections with sidebar navigation
6. Save the page—it appears in the admin menu immediately
7. Fill in values on your new options page
8. Access saved values in your theme/plugin code

Where to Find It#

Location: Switchboard → Options Page Builder

The builder interface shows all your created pages and lets you add, edit, or delete them.

Page Settings#

When creating an options page, configure these settings:

Available Field Types#

Add these field types to your options pages:

Field Options#

Each field can be configured with:

• Label — The field label shown to users
• Field ID — Unique identifier for retrieving the value
• Description — Help text shown below the field
• Default Value — Pre-filled value for new pages
• Required — Whether the field must be filled in
• Options — For select/radio fields, the available choices
• Width — Field width (full for full-width, default for standard)

Using Groups for Section Organization#

The Group field type creates organized sections with sidebar navigation. This is ideal for options pages with many settings.

How Groups Work#

1. Add a Group field to start a new section
2. Give it a label (e.g., “General Settings”, “Social Media”)
3. Add a description (optional) to explain the section
4. All fields added after the Group belong to that section
5. Add another Group to start a new section

Grouped Layout Features#

When your page has Groups, it automatically renders with:

• Sidebar Navigation — Click section titles to jump between groups
• Card-Based Sections — Each group displays in a styled card
• Active State Highlighting — Current section is highlighted in nav
• URL Anchors — Direct links to specific sections (e.g., #social-media)

Example Page Structure#

[Group: General Settings]
  Description: "Basic site configuration"
  - Site Name (text)
  - Tagline (text)
  - Logo (image)

[Group: Contact Information]
  Description: "How customers can reach you"
  - Phone Number (text)
  - Email Address (email)
  - Physical Address (textarea)

[Group: Social Media]
  Description: "Your social media profiles"
  - Facebook URL (url)
  - Twitter URL (url)
  - Instagram URL (url)
  - LinkedIn URL (url)

This creates a beautiful tabbed interface with sidebar navigation.

Fields Before First Group#

If you add fields before your first Group, they’re automatically placed in a “General” section. For best organization, start with a Group.

Default Styling#

Options pages built with this module come with polished, professional styling:

• Card-based layout — Settings displayed in clean, bordered cards
• Consistent typography — Readable labels and descriptions
• Responsive design — Works on all screen sizes
• Switchboard color scheme — Matches the overall Switchboard aesthetic
• Grouped sidebar — Easy navigation between sections

No custom CSS required—pages look great out of the box.

Accessing Saved Values#

Retrieve your saved options in theme or plugin code:

// Get all options for a page
$options = get_option('switchboard_options_my-site-settings');

// Get a specific field value
$phone = $options['phone_number'] ?? '';
$email = $options['contact_email'] ?? '';
$logo = $options['site_logo'] ?? '';

// Use in your theme
echo '<a href="tel:' . esc_attr($phone) . '">' . esc_html($phone) . '</a>';

The option name follows the pattern: switchboard_options_{menu_slug}

Example: Site Settings Page#

Here’s how to create a typical site settings page with groups:

1. Create the page:

   • Page Title: “Site Settings”
   • Menu Title: “Site Settings”
   • Menu Slug: site-settings
   • Parent Menu: Settings (or leave empty for top-level)

2. Add fields with groups:

   [Group: Contact Info]
     - Phone Number (text)
     - Email Address (email)
     - Address (textarea)
   
   [Group: Social Links]
     - Facebook URL (url)
     - Twitter URL (url)
     - Instagram URL (url)
   
   [Group: Branding]
     - Footer Logo (image)
     - Copyright Text (text)

3. Use in theme:

<?php
$settings = get_option('switchboard_options_site-settings', []);
?>

<footer>
    <?php if (!empty($settings['footer_logo'])): ?>
        <img src="<?php echo esc_url($settings['footer_logo']); ?>" alt="Logo">
    <?php endif; ?>

    <p><?php echo esc_html($settings['phone_number'] ?? ''); ?></p>
    <p><?php echo nl2br(esc_html($settings['address'] ?? '')); ?></p>
</footer>

Menu Placement#

Top-Level Menu#

Leave “Parent Menu” empty to create a top-level menu item. Choose an icon and position to control where it appears.

Submenu#

Select a parent menu to nest your options page:

• Settings — Under Settings menu
• Tools — Under Tools menu
• Appearance — Under Appearance menu
• Switchboard — Under Switchboard menu
• Any other registered admin menu

Capabilities#

Control who can access your options page:

Data Storage#

Options are stored in the WordPress wp_options table:

• Option name: switchboard_options_{slug}
• Format: Serialized array of field values
• Autoload: Yes (loaded on every page)

When you delete an options page, the stored values are also deleted.

FAQ#

red|Red Color
blue|Blue Color
green|Green Color

$logo = $options['logo'] ?? '';
if ($logo) {
    echo '<img src="' . esc_url($logo) . '" alt="Logo">';
}