Skip to main content

Add a tab to the episode editor via PHP filter

Free Intermediate

The simplest way to extend the episode editor. Declare a tab with sections and fields using a PHP array — no JavaScript required. The Benecaster admin app fetches this config at boot and renders the tab automatically. Field values with meta: true are stored as episode post meta.

When to Use This

Use the PHP filter approach (Tier 1) when your tab needs to collect and store structured data — toggles, text fields, URLs, selects — as episode post meta. The Benecaster rendering engine handles the fields, save/load lifecycle, and meta storage.

Use Tier 2 (SlotFill) when you need interactive React UI — live previews, third-party embeds, custom pickers — that can’t be expressed as a field declaration array.

The two tiers are complementary: you can declare a tab shell with benecaster_episode_editor_tabs and fill it with a React component via SlotFill, using Tier 1 for the nav entry and Tier 2 for the content.

Prerequisites

  • Benecaster installed with a valid license

  • Your add-on loaded before the admin page renders

  • No JavaScript required for Tier 1 field-only tabs

How It Works

Filter benecaster_episode_editor_tabs and append a tab declaration. A tab holds one or more sections, and each section holds an array of field declarations. The Benecaster admin app fetches this configuration at boot and renders the tab, handling the save and load lifecycle and writing values to post meta — there is nothing to build on the JavaScript side.

Field Types

Type Use for
text Single-line text
textarea Multi-line text
select Dropdown — requires options array of {value, label}
toggle Boolean on/off
number Numeric input
url URL input with validation
post_select WordPress post picker — requires post_type key

Notes

Tab declaration keys:

  • id — unique identifier; also used as the SlotFill slot name suffix (BenecasterEpisodeEditorTab_{id})

  • label — tab label shown in the sidebar

  • icon — optional icon name from the Benecaster icon set (e.g. 'puzzle', 'star', 'settings')

  • add_on — optional add-on slug shown as a badge on the tab

  • sections — array of section objects; each section has id, label, and fields

Fields with meta: true are stored as episode post meta using the field id as the meta key — read them back with get_post_meta() using that same key.

Fields without meta: true are rendered as display-only — useful for headings, help text, or fields managed by a custom REST controller.

Tab order: Tabs are appended to the end of the sidebar. Benecaster tabs (Details, Access, Media, Artwork, Guests, References, More) appear first; add-on tabs follow in the order they were appended.

Adding a Settings Page and Dashboard Card

The same pattern works for show settings pages and dashboard cards — filter benecaster_settings_pages or benecaster_dashboard_cards and append an entry carrying id, label, and add_on. Neither takes a sections array; they declare the shell only.

Fill the settings page or dashboard card content with a React component via the Tier 2 SlotFill approach — see Inject a React Component into a Named Slot.

Code

<?php
add_filter( 'benecaster_episode_editor_tabs', function ( array $tabs ): array {
    $tabs[] = [
        'id'       => 'my-addon',
        'label'    => __( 'My Add-on', 'my-addon' ),
        'icon'     => 'puzzle',
        'add_on'   => 'my-addon',
        'sections' => [
            [
                'id'     => 'my-settings',
                'label'  => __( 'Settings', 'my-addon' ),
                'fields' => [
                    [
                        'id'      => '_my_addon_field',
                        'type'    => 'toggle',
                        'label'   => __( 'Enable feature', 'my-addon' ),
                        'default' => false,
                        'meta'    => true,
                    ],
                ],
            ],
        ],
    ];
    return $tabs;
} );

View on GitHub →

Hooks Used

Need this built rather than just documented? See our services →

Powered by