Listing Uploaded MP3 Audio Files in a WordPress Template

There is no doubt that WordPress has done an excellent job with uploading and sharing media files. From images to MP3s, users are able to easily share files with readers.

However, displaying these files has always been limited for novice and intermediate users. After all, the only default way to display files is the the content editor on a post. What many users do not know is the way to call for the uploaded media on an individual post. This can be done but adding some simple calls within a template file and this tutorial will show you how to do just that.

Before we get started, please note that I assume you have an small amount of knowledge with PHP and you’re very familiar with WordPress and theme development.

The End Code

In the end, this is what we will produce. This cade will output any audio uploaded in the post.

<?php $audio = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'audio' ) ); ?>
<?php if ( empty( $audio ) ) : ?>
	<?php edit_post_link( 'Go add some &rarr;', '<div class="edit-post"><span>No MP3s uploaded for this post. Why not </span>', '</div>' ); ?>
<?php else : ?>
	<div>
		<h3>Uploaded MP3s</h3>
		<ul>
		<?php foreach ( $audio as $attachment_id => $attachment ) : ?>
			<li><a href="<?php echo wp_get_attachment_url( $attachment_id, 'full' ); ?>" title="<?php echo wp_get_attachment_link( $attachment_id, '' , false, false, ' '); ?>" rel="audio-file">MP3</a></li>
		<?php endforeach; ?>
		</ul>
	</div>
<?php endif; ?>

Please not that this code must be place within the loop. If you do not know what the loop is, then this tutorial is not for you.

Getting Started

First things first. Let’s open up you template files. Hopefully you are using a child theme to make modification to your theme (this will alleviate any problems with updates to your theme). If you are not, I highly suggest you start today. Once you have your template up and ready, open up the template file that you want to modify. For the sake of ease, I will edit the single.php template file. For more information on the single.php template file visit here.

Setting Up the Call for Audio Attachments

Within the single.php (somewhere after the loop begins) add the following line of code.

<?php $audio = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'audio' ) ); ?>

Code Explained

The above code first sets a variable ($audio) that calls (gets) the post’s children. The get_children() function retrieves attachments, revisions, or sub-Pages, possibly by post parent. In this case we are going to call the audio attachments of the current post by using the appropriate parameters. I hope that the parameters above are self-explanatory.

Verifying the Audio Exists

Before we move any further, lets first verify that some audio files exists. Use the conditional statement below to check $audio variable we created above.

<?php if ( empty( $audio ) ) : ?>
	<?php edit_post_link( 'Go add some &rarr;', '<div class="edit-post"><span>No MP3s uploaded for this post. Why not </span>', '</div>' ); ?>

Code Explained

Obviously, this code only renders if the $audio variable is empty. While you can put any information here, I choose to put an edit_post_link() because we build for users. If this was my own theme, I probably would put a default audio file.

Listing the Uploaded Audio Files

If you’ve made it this far, there is now doubt that you have uploaded some audio files. Now let’s grab those files and list them within the template.

<?php else : ?>
	<div>
		<h3>Uploaded MP3s</h3>
		<ul>
		<?php foreach ( $audio as $attachment_id => $attachment ) : ?>
			<li><a href="<?php echo wp_get_attachment_url( $attachment_id, 'full' ); ?>" title="<?php echo wp_get_attachment_link( $attachment_id, '' , false, false, ' '); ?>" rel="audio-file">MP3</a></li>
		<?php endforeach; ?>
		</ul>
	</div>
<?php endif; ?>

Code Explained

Building off our previous if statement, we open up this segment with an else; thus, if the $audio variable is not empty, we will list the uploaded audio files. After we open the HTML we add a foreach statement which grabs each audio file uploaded and spits them out as a list item.

Wrapping it Up

If all is successful, you should see a list of audio files on your single posts. Remember, this assumes you have uploaded the files within a single post.

I have left out any stylistic modifications, but essentially you can add styles accordingly. If you want to get super crazy, you can place the files in a Colorbox like I did with our City Church child theme. Check this out in action here.

I hope you have found this tutorial useful. Don’t forget to share!