Skip to content

Raw Field

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

Overview

The Raw field renders a block of arbitrary HTML inside the options panel — no input, no saved value. Unlike the Shortcode field which executes a registered shortcode, the Raw field outputs whatever HTML string you provide directly. Use it to embed custom notices, styled UI elements, inline previews, external iframes, or any other raw HTML that does not fit the Shortcode or Info field patterns.


Field Registration

php

[
    'id'      => 'custom_notice',
    'type'    => 'raw',
    'title'   => __('Important Notice', 'your-textdomain'),
    'content' => '<p style="color: #d63638;">Please back up your settings before making major changes.</p>',
]

Field Options

OptionTypeRequiredDescription
idstringUnique field identifier — not stored, but required for internal rendering
typestringMust be raw
titlestringLabel shown above the HTML content
descstringHelp text shown below the content
contentstringRaw HTML string to render inside the panel
requiredarrayConditional logic rules — see Conditional Logic

Return Value

None. The Raw field stores no value and returns nothing from themeplus_get_option().


Usage Examples

Styled upgrade notice

php

[
    '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

php

[
    '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

php

$theme        = wp_get_theme();
$version_html = '<p>Current theme version: <strong>' . esc_html( $theme->get( 'Version' ) ) . '</strong></p>';

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

Custom color swatch grid

php

$swatches = ['#2271b1', '#00a32a', '#d63638', '#f0b849', '#1e1e1e', '#f6f7f7'];

$html = '<div style="display: flex; gap: 8px; flex-wrap: wrap;">';
foreach ( $swatches as $color ) {
    $html .= '<span style="
        display: inline-block;
        width: 36px;
        height: 36px;
        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_field( 'colors', [
    'id'      => 'swatch_preview',
    'type'    => 'raw',
    'title'   => __('Active Palette', 'your-textdomain'),
    'content' => $html,
]);

With a conditional

php

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

Notes

  • The id must still be unique within the section even though the field stores no value.
  • Always escape dynamic values embedded in the content string — use esc_html() for text, esc_attr() for attribute values, and esc_url() for URLs. Never pass unescaped user input into the content string.
  • The Raw field renders its content string without any additional sanitization — it is your responsibility to ensure the output is safe.
  • For executing a registered WordPress shortcode, use the Shortcode field instead.
  • For simple text notices and warnings, use the Info field instead — it provides built-in styling variants without requiring custom HTML.

On This Page