Tutorial Video Dashboard Widget
Embeds a how-to video on the dashboard, such as a walkthrough recorded for your client, with an optional short message.
Opens WPIDE on
Code
$wpide_tutorial = array(
'title' => 'How to Edit Your Website',
'video' => 'https://www.youtube.com/watch?v=XXXXXXXXXXX', // YouTube, Vimeo or any oEmbed URL.
'message' => 'Watch this short walkthrough before your first edit.',
);
add_action( 'wp_dashboard_setup', function () use ( $wpide_tutorial ) {
wp_add_dashboard_widget( 'wpide_tutorial_video', esc_html( $wpide_tutorial['title'] ), function () use ( $wpide_tutorial ) {
if ( $wpide_tutorial['message'] ) {
echo '<p>' . esc_html( $wpide_tutorial['message'] ) . '</p>';
}
$embed = wp_oembed_get( $wpide_tutorial['video'], array( 'width' => 600 ) );
echo $embed ? '<div class="wpide-video" style="aspect-ratio:16/9">' . str_replace( '<iframe ', '<iframe style="width:100%;height:100%" ', $embed ) . '</div>' : '<p><a href="' . esc_url( $wpide_tutorial['video'] ) . '" target="_blank" rel="noopener">Open the video</a></p>';
} );
}, 1 );Notes
The oEmbed result is fetched from the video site; WordPress does not cache it outside posts, so keep the widget for clients only if needed.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.