Raw Field

A display-only field that renders arbitrary HTML directly inside the options panel.

Overview

The Raw field renders a block of HTML inside the options panel — no input, no saved value. Use it to embed custom notices, styled UI elements, inline previews, video embeds, dynamic PHP-generated markup, or any HTML content that doesn’t fit the Info or Section field patterns.

The HTML you provide in content is output as-is inside the panel. You are responsible for escaping all dynamic values.

For executing a WordPress shortcode, use the Shortcode field. For simple styled notices, use the Info field.

Field Registration

[
    'id'      => 'custom_notice',
    'type'    => 'raw',
    'title'   => __( 'Important Notice', 'your-textdomain' ),
    'content' => '<p><strong>Back up your settings</strong> before making major changes.</p>',
]

Field Options

Option	Type	Required	Description
id	string	✅	Unique field identifier — not stored, but required for internal rendering
type	string	✅	Must be raw
title	string	—	Label shown above the HTML content
desc	string	—	Help text shown below the content
content	string	✅	Raw HTML string to render inside the panel
required	array	—	Conditional logic rules — see Conditional Logic

Return Value

None. The Raw field stores no value and never appears in the output of themeplus_get_option().

Usage Examples

Styled upgrade notice

[
    'id'      => 'pro_upgrade_notice',
    'type'    => 'raw',
    'content' => '
        <div style="background: #f0f6fc; border-left: 4px solid #2271b1; padding: 12px 16px; border-radius: 4px;">
            <strong>Unlock Pro Features</strong>
            <p style="margin: 6px 0 0;">Get advanced layout options, premium templates, and priority support.</p>
            <a href="https://fronttheme.com/pro" target="_blank" rel="noopener noreferrer"
               style="display: inline-block; margin-top: 10px; padding: 6px 14px; background: #2271b1; color: #fff; border-radius: 4px; text-decoration: none;">
                Upgrade to Pro
            </a>
        </div>
    ',
]

Embedded video tutorial

[
    'id'      => 'setup_video',
    'type'    => 'raw',
    'title'   => __( 'Setup Guide', 'your-textdomain' ),
    'content' => '
        <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
            <iframe
                src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
                allowfullscreen>
            </iframe>
        </div>
    ',
]

Dynamic HTML built in PHP

$theme        = wp_get_theme();
$version_html = '<p>' . __( 'Theme version:', 'your-textdomain' ) . ' <strong>' . esc_html( $theme->get( 'Version' ) ) . '</strong></p>';

themeplus_add_section([
    'id'     => 'about',
    'title'  => __( 'About', 'your-textdomain' ),
    'icon'   => 'circle-info',   // FontAwesome name only
    'fields' => [
        [
            'id'      => 'theme_version_display',
            'type'    => 'raw',
            'title'   => __( 'Theme Version', 'your-textdomain' ),
            'content' => $version_html,
        ],
    ],
]);

Color swatch grid

$swatches = ['#7F27FF', '#17a2b8', '#04AA6D', '#e11b63', '#EC942C', '#1e1e1e'];
$html     = '<div style="display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0;">';

foreach ( $swatches as $color ) {
    $html .= '<span style="display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: '
          . esc_attr( $color )
          . '; border: 1px solid rgba(0,0,0,0.1);" title="'
          . esc_attr( $color )
          . '"></span>';
}

$html .= '</div>';

themeplus_add_section([
    'id'     => 'colors',
    'title'  => __( 'Colors', 'your-textdomain' ),
    'icon'   => 'palette',
    'fields' => [
        [
            'id'      => 'palette_preview',
            'type'    => 'raw',
            'title'   => __( 'Active Palette', 'your-textdomain' ),
            'content' => $html,
        ],
    ],
]);

With a conditional

[
    'id'      => 'show_upgrade_notice',
    'type'    => 'toggle',
    'title'   => __( 'Show Upgrade Notice', 'your-textdomain' ),
    'default' => true,
],
[
    'id'       => 'upgrade_notice',
    'type'     => 'raw',
    'content'  => '<p><a href="https://fronttheme.com/pro" target="_blank" rel="noopener noreferrer">' . esc_html__( 'Upgrade to Pro', 'your-textdomain' ) . '</a> to unlock all features.</p>',
    'required' => ['show_upgrade_notice', '==', true],
],

Notes

• The id must be unique within the section even though the field stores no value.
• Always escape dynamic values inside the content string — use esc_html() for text, esc_attr() for attribute values, and esc_url() for URLs. The Raw field outputs its content without additional sanitization — escaping is your responsibility.
• For executing a registered WordPress shortcode, use the Shortcode field. For simple styled notices with info, warning, success, or error variants, use the Info field.
• Raw fields do not appear in the Developer Panel or in themeplus_get_option() output.