Skip to main content

Add a Screen of Your Own to the Benecaster Admin

Free Advanced

Declare the screen in PHP with the benecaster_admin_screens filter, then fill it in React. The parts that are easy to miss: the fill gets a navigate for moving between its own sub-screens, because React Router isn’t shared with add-ons; and a tour step on a sub-screen needs a sub_screens id.

The declaration, in your add-on’s PHP:

add_filter( 'benecaster_admin_screens', function ( array $screens ): array {
    $screens[] = [
        'id'          => 'email-editor',
        'label'       => __( 'Email Editor', 'my-addon' ),
        'icon'        => 'mail',
        'add_on'      => 'benecaster-addon-email-editor',
        'sub_screens' => [ 'email-editor-notifications' => 'notifications' ],
    ];
    return $screens;
} );

The fill, in your add-on’s script (below). A tour can then name screen: 'email-editor' or screen: 'email-editor-notifications', and target [data-tour="email-editor-nav"] for the menu item.

Code

const EmailEditorScreen = ( { showId, path, navigate } ) => {
    if ( path === 'notifications' ) {
        return <Notifications showId={ showId } onBack={ () => navigate( '' ) } />;
    }
    if ( path.startsWith( 'templates/' ) ) {
        return <TemplateEditor showId={ showId } type={ path.slice( 10 ) } />;
    }
    return <TemplateList showId={ showId } onOpen={ ( type ) => navigate( `templates/${ type }` ) } />;
};

window.BenecasterExtensions?.registerFill( 'BenecasterAddonScreen_email-editor', EmailEditorScreen );

View on GitHub →

Hooks Used

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