Skip to main content

benecaster_dashboard_cards

Filter Free

Filters the dashboard card declarations rendered after the built-in 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.

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 Benecaster admin app fetches this config via GET /benecaster/v1/admin/extensions and renders declared cards after the Benecaster 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 on the Benecaster Settings screen.

Affects

  • Benecaster Dashboard

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