Skip to main content

benecaster_dashboard_cards

Filter Free Since v1.0.0

Filters the dashboard card declarations rendered after the core stat cards on the main Benecaster dashboard. Each declared card creates a SlotFill registration point that an add-on’s React component fills with content. Cards are rendered in declaration order.

The card component receives { showId } as props, making it straightforward to fetch show-scoped stats or status from a REST endpoint. Use dashboard cards to surface add-on-specific metrics, status indicators, connection status checks, or quick actions. Each id must be unique — it is used as the React key and the SlotFill slot name suffix. This is a free filter that fires regardless of license status.

Parameters

Name Type Default Description
$cards array Array of dashboard card declaration arrays. Each declaration is an associative array with the following keys: `id` (string, required) — unique card identifier, used as the React key and the SlotFill slot name suffix (`BenecasterDashboardCards`); `label` (string, required) — card heading shown in the dashboard; `add_on` (string, optional) — add-on slug, shown as a small badge on the card.

Returns: array

Examples

Register a Donations summary card

add_filter( 'benecaster_dashboard_cards', function( $cards ) {
    $cards[] = [
        'id'    => 'donations-summary',
        'label' => 'Donations',
    ];
    return $cards;
} );

Register card and fill with React component

// PHP: declare the card.
add_filter( 'benecaster_dashboard_cards', function ( array $cards ): array {
    $cards[] = [
        'id'     => 'my-addon-stats',
        'label'  => __( 'My Add-on', 'my-addon' ),
        'add_on' => 'my-addon',
    ];
    return $cards;
} );

// JS: fill the card (compiled React).
// const MyAddonCard = ({ showId }) => { ... }
// wp.domReady( () => {
//     window.BenecasterExtensions?.registerFill( 'BenecasterDashboardCards', MyAddonCard );
// } );

Complete PHP declaration and React fill (full working JS)

// PHP: declare the card.
add_filter( 'benecaster_dashboard_cards', function ( array $cards ): array {
    $cards[] = [
        'id'     => 'my-addon-stats',
        'label'  => __( 'My Add-on', 'my-addon' ),
        'add_on' => 'my-addon',
    ];

    return $cards;
} );

// JS: fill the card with a React component.
// my-addon/resources/js/admin.js (compiled)
const MyAddonCard = ({ showId }) => {
    const [ data, setData ] = React.useState( null );

    React.useEffect( () => {
        wp.apiFetch( {
            path: `/my-addon/v1/stats?show_id=${ showId }`,
        } ).then( setData );
    }, [ showId ] );

    if ( ! data ) {
        return <p>Loading…</p>;
    }

    return (
        <div>
            <p>{ data.summary }</p>
        </div>
    );
};

wp.domReady( () => {
    window.BenecasterExtensions?.registerFill(
        'BenecasterDashboardCards',
        MyAddonCard
    );
} );

Notes

Fires at admin page load, when the Benecaster dashboard bootstraps its card configuration. The core React app fetches this config via GET /benecaster/v1/admin/extensions and renders declared cards after the core stat cards (subscriber count, episode count, etc.). If you declare multiple cards, append them in the order you want them to appear.

Related filters: benecaster_episode_editor_tabs — declare a tab in the episode editor sidebar; benecaster_settings_pages — declare an add-on page in show settings.

Affects

  • Benecaster Dashboard