Skip to main content

Add a tab to the episode editor

Free Intermediate

An episode-editor tab takes two parts: PHP declares the tab, JavaScript draws its panel. benecaster_episode_editor_tabs adds the tab’s button to the editor’s tab bar. The panel is the SlotFill slot BenecasterEpisodeEditorTab_{id}, and Benecaster draws nothing in it: register a React component there, and save its values through your own REST route or post meta. A tab declared with no fill shows an empty panel.

Prerequisites

How It Works

Filter benecaster_episode_editor_tabs and append a declaration (the code below). The editor fetches the declarations for the episode’s own show, and drops any tab whose add_on is not active there — so a paid add-on’s tab appears only on shows where it is licensed and switched on. The filter’s second argument is that show’s ID, or 0 when the list is fetched without a show; keep returning your tab either way.

Then fill the panel from JavaScript. The fill receives { episodeId, showId }:

wp.domReady( () => {
    window.BenecasterExtensions?.registerFill( 'BenecasterEpisodeEditorTab_my-addon', MyPanel );
} );

Notes

Tab declaration keys:

  • id — unique identifier: letters, digits, - or _. It is the slot name suffix (BenecasterEpisodeEditorTab_{id}) and the ?tab= value — #/episodes/{episodeId}?tab=my-addon opens the tab directly

  • label — the tab’s label

  • add_on — your add-on’s entitlement slug; hides the tab on shows where the add-on is not active. Leave it out only for a free add-on whose tab belongs on every show

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

A sections key is accepted and passed through to GET /benecaster/v1/admin/extensions as data your add-on can read back, but nothing renders it and no field in it is saved.

Tab order: Benecaster’s own tabs (Details, Access, Media, Artwork, Guests, References, More) come first; add-on tabs follow in the order they were appended.

Settings pages and dashboard cards work the same way — filter benecaster_settings_pages or benecaster_dashboard_cards to declare the shell, then fill its slot. A settings page appears on the install-wide Benecaster Settings screen, not in a show’s settings; for a tab in one show’s settings, see Add an Add-on Tab to One Show’s Settings.

To point a guided-tour step at your tab, see Point a tour step at your tab in the episode editor.

Code

<?php
add_filter( 'benecaster_episode_editor_tabs', function ( array $tabs, int $show_id ): array {
    $tabs[] = [
        'id'     => 'my-addon',
        'label'  => __( 'My Add-on', 'my-addon' ),
        'icon'   => 'puzzle',
        'add_on' => 'benecaster-addon-my-addon', // hidden on shows where it is not active
    ];
    return $tabs;
}, 10, 2 );

// The panel is drawn in JavaScript:
// window.BenecasterExtensions.registerFill( 'BenecasterEpisodeEditorTab_my-addon', MyPanel );

View on GitHub →

Hooks Used

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