How to Create Audio & Video Shortcode in WordPress

WordPress Development

Adding an audio file or video file in WordPress is pretty easy, you can do that simply by adding media from the WordPress editor but here I will show you how to create audio and video shortcodes in WordPress.

To create an audio shortcode and video shortcode, code snippets given below. Just add them within your theme’s functions.php file and use their respective shortcode to display them.

Create Audio Shortcode In WordPress

Copy this code to the functions.php file and use shortcode [diwp-audio src=”your audio file link”] to display it in front end.

//==============================================================
//Create Shortcode for Audio Player In WordPress
//==============================================================

function diwp_audio_shortcode($attr){

	$args = shortcode_atts(array(

				'src' 		=> 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
				'loop'		=> '',
				'autoplay'	=> '',
				'preload'	=> 'none'

			), $attr);

	$audio = wp_audio_shortcode(array(

				'src' 		=> $args['src'],
				'loop'		=> $args['loop'],
				'autoplay'	=> $args['autoplay'],
				'preload'	=> $args['preload']

			));

	return $audio;

}

add_shortcode('diwp-audio', 'diwp_audio_shortcode');

[diwp-audio] shortcode has some attributes and you can use them as per your needs. Let’s see them one by one.

  1. src – Source of your audio file.
  2. loop – Want this to play in a loop, If yes then pass loop=”loop” as value. To play any audio in loop, autoplay should be enabled.
  3. autoplay – Want this audio autoplay. If yes then pass autoplay=”autoplay”
  4. preload – Want this to preload. Default Value: preload

Create Video Shortcode In WordPress

Copy this code into your theme’s functions.php file and use shortcode [diwp-video src=”Your Video File Source”] to display that video in front.

function diwp_video_shortcode($attr){

	$args = shortcode_atts(array(
					'src' => '#',
					'height' => '360px',
					'width' => '640px',
					'poster' => '',
					'loop' => '',
					'autoplay' => 'autoplay',
					'preload' => 'preload',
					'class' => '',
				), $attr);

	$video = wp_video_shortcode(array(

					'src' => $args['src'],
					'height' => $args['height'],
					'width' => $args['width'],
					'poster' => $args['poster'],
					'loop' => $args['loop'],
					'autoplay' => $args['autoplay'],
					'preload' => $args['preload'],
					'class' => 'wp-video-shortcode '.$args['class'],
				));

	return $video;
}

add_shortcode('diwp-video', 'diwp_video_shortcode');

[diwp-video] shortcode has some attributes and you can use them as per your needs. Let’s see them one by one.

  1. src – Source of your video file, you can put a youtube URL as well.
  2. height – can set height for your video player. Default height is 360px.
  3. width – can set width for your video player. Default width is 640px.
  4. poster – can set a poster image for video. Just put the poster image URL here. Default is empty.
  5. loop – Want this video to play in a loop, If yes then pass loop=”loop” as value. To play video in a loop, autoplay should be enabled
  6. autoplay – Want this video autoplay. If yes then pass autoplay=”autoplay”
  7. preload – Want this to preload. Default Value: preload
  8. class – to add class to this audio player. Default class is : wp-video-shortcode

Note: To autoplay any audio or video file, make sure your browser allows the autoplay.

I hope this article will help you to learn how to create audio and video shortcodes to add audio and video files in WordPress.

Bhuvnesh Shrivastava
Owner of diveinwp.com, solely responsible for creating helpful, informative content about WordPress, a fulltime WordPress developer with 8+ years of hands-on experience in WordPress design and development.

Related Articles