Collapsible Transcript Shortcode for Audio and Video
Adds a [transcript] shortcode that wraps the text version of a podcast or video in an accessible show/hide section, so every recording can have a transcript without cluttering the page.
Opens WPIDE on
Code
add_shortcode( 'transcript', function ( $atts, $content = '' ) {
$atts = shortcode_atts( array( 'title' => 'Transcript', 'open' => 'no' ), $atts, 'transcript' );
if ( '' === trim( (string) $content ) ) {
return '';
}
return sprintf(
'<details class="wpide-transcript"%1$s style="margin:1em 0;padding:.75em 1em;border:1px solid #c3c4c7;border-radius:6px;"><summary style="cursor:pointer;font-weight:600;">%2$s</summary><div class="wpide-transcript-text" style="margin-top:.75em;">%3$s</div></details>',
'yes' === $atts['open'] ? ' open' : '',
esc_html( $atts['title'] ),
wpautop( do_shortcode( wp_kses_post( $content ) ) )
);
} );Notes
Use [transcript title="Read the interview transcript"]...[/transcript]; the section uses the native details element, so it works with keyboards and screen readers.
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.