Snippet: Create a Custom Off Canvas Element Shortcode

// Create a "[my_off_canvas]" for displaying an off-canvas element with custom content.
// Change "my_" to your preferred prefix and modify accordingly.
add_shortcode( 'my_off_canvas', function() {
	ob_start();
	$off_canvas_id = 'my-off-canvas'; // any unique id you want
	$off_canvas_content = do_shortcode( '[wpex_template id="ID"]' ); // Change ID with your dynamic template to for the off canvas content.
	$off_canvas_footer_content = ''; // Any content you want for the footer.
	if ( class_exists( 'TotalTheme\Off_Canvas' ) ) {

		// The toggle button - @see Total/inc/hamburger-icon for args.
		$hamburger_icon = class_exists( 'TotalTheme\Hamburger_Icon' ) ? TotalTheme\Hamburger_Icon::render() : 'Open Menu';
		echo '<button class="wpex-unstyled-button" aria-controls="' . $off_canvas_id . '" data-wpex-toggle="off-canvas" aria-expanded-false>' . $hamburger_icon . '</button>';
		
		// See Total/inc/off-canvas for all available args.
		$off_canvas_args = [
			'id' => $off_canvas_id,
		];
		
		// Render new off canvas element
		new TotalTheme\Off_Canvas( $off_canvas_args, $off_canvas_content, $off_canvas_footer_content );
	}
	return ob_get_clean();
} );