I'm creating a Wordpress blogging theme and have started doing the individual files for each post-format. In doing this I've encountered a problem for the functionality to the audio format. I would like to have whatever audio file the user uploads as a featured audio that will be displayed and playable over the title of the post.

I've created somewhat of a fix for the problem using the_content twice in the same loop and removing everything but the audio player using css in the first "the_content".

So the basis of my layout looks something like this:

the_content(); (this I have given a class and display: none; for everything but the audio player)

This however doesn't work as well, as in some situations the layout breaks, and text from the post appears dependent on when I embed the audio on the page. I'd like to find a more correct solution to this and not be all ghetto in my code.

Appreciate all help given :) Michael


This code creates a dropdown list of all the media files uploaded that is audio:

    add_action("admin_init", "audio_init");
    add_action('save_post', 'save_audio_link');
    function audio_init(){
            add_meta_box("mp3-audio", "MP3 AUDIO", "audio_link", "post", "normal", "low");
    function audio_link(){
            global $post;
            $custom  = get_post_custom($post->ID);
            $link    = $custom["link"][0];
            $count   = 0;
            echo '<div class="link_header">';
            $query_audio_args = array(
                    'post_type' => 'attachment',
                    'post_mime_type' =>'audio',
                    'post_status' => 'inherit',
                    'posts_per_page' => -1,
            $query_audio = new WP_Query( $query_audio_args );
            $audio = array();
            echo '<select name="link">';
            echo '<option class="audio_select">SELECT AUDIO FILE</option>';
            foreach ( $query_audio->posts as $file) {
               if($link == $audio[]= $file->guid){
                  echo '<option value="'.$audio[]= $file->guid.'" selected="true">'.$audio[]= $file->guid.'</option>';
                  echo '<option value="'.$audio[]= $file->guid.'">'.$audio[]= $file->guid.'</option>';
            echo '</select><br /></div>';
            echo '<p>Selecting an audio file from the above list to attach to this post.</p>';
            echo '<div class="audio_count"><span>Files:</span> <b>'.$count.'</b></div>';
    function save_audio_link(){
            global $post;
            if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){ return $post->ID; }
            update_post_meta($post->ID, "link", $_POST["link"]);
    add_action( 'admin_head', 'audio_css' );
    function audio_css() {
            echo '<style type="text/css">
                    border-top:solid 1px #e5e5e5;
                    padding:6px 6px 6px 12px;
                    margin:0px -6px -8px -6px;
                    -moz-border-radius:0px 0px 6px 6px;
                    -webkit-border-radius:0px 0px 6px 6px;
                    border-radius:0px 0px 6px 6px;
            .audio_count span{color:#666;}
    function audio_file_url(){
            global $wp_query;
            $custom = get_post_custom($wp_query->post->ID);
            echo $custom['link'][0];

This is the section of my current audio-format template attempting to fetch the audio-url and display it in the built in audio shortcode:

<header class="entry-header">
        <div class="soundcloud-player">
            <?php the_post_thumbnail(); ?>
            <?php $audio_url = get_post_meta($post->ID, '$key', true); //this is getting your custom field url ?>
            <?php $attr = array(
                'src'      => $audio_url,
                'loop'     => '',
                'autoplay' => '',
                'preload' => 'none'
            echo wp_audio_shortcode( $attr ); ?>
            <?php do_shortcode('[audio URL=". $audio_url ."]') ?>
    </header><!-- .entry-header -->

3 Answers 3


so I took a look at your updated code, and it looks like where you're writing:

$audio_url = get_post_meta($post->ID, '$key', true); //this is getting your custom field url

You forgot to replace '$key' with the actual string name of the meta you're looking for, which judging from your functions, is called 'link'. So I edited it with:

$audio_url = get_post_meta($post->ID, 'link', true); //this is getting your custom field url

And the player showed up no problem.

You also might want to edit your functionality so that it either grabs the first file on the dropdown as it's default value or doesn't look for the $link = $custom["link"][0]; values until the user has chosen something because on a post that doesn't have a file picked yet, I'm getting a "Undefined index: link" notice on your meta box.

Let me know if it you get it working but so far - it's looking good. :-)


I would add a meta box to the Edit screen and then retrieve the value from wherever I wanted.

Check out the following resources:

1) http://codex.wordpress.org/Function_Reference/add_meta_box

2) http://wordpress.org/plugins/meta-box/screenshots/

Does this approach works for you?


Okay, so you want to be able to display audio wherever you want without having to use the_content for it in a default template - therefore audio that's not stuck with the content in the main WordPress text editor.

If I'm assuming that you're not using custom post types to create posts just for your audio, or Magic Fields, and you just want to use what's in the theme (content.php, content-link.php, content-image.php and so on), I would suggest just using a custom field to insert your audio file. If you're using WP 3.6 and above, it supports audio and will display a player automatically.

To prevent having to use the_content twice and for cleaner code, create a custom field called "audio-file" for example, and display it above the_title like you have in your example. In that custom field will be the url of the file that you've uploaded via your Media Library. In your template, you can make use of wp_audio_shortcode. It will look something like this with your code:

$audio_url = get_post_meta($post->ID, 'audio-file', true); //this is getting your custom field url
$attr = array(
    'src'      => $audio_url,
    'loop'     => '',
    'autoplay' => '',
    'preload' => 'none'
echo wp_audio_shortcode( $attr ); //this will turn into a player

Hope that helps! Good luck. :-)

  • Thank you for your help, I will test this out as soon as I get back home :) Commented Jan 24, 2014 at 16:59
  • So in the line: $audio_url = get_post_meta($post->ID, 'audio-file', true); what is audio-file? Commented Jan 25, 2014 at 20:22
  • audio-file is the name that I've given the custom field, you can call it whatever you like, I just used "audio-file" for my example. And when creating the custom field on your post, the value that's dropped in there is the url of the file, assuming you've uploaded it into the Media Library and grabbed the url from there.
    – RachieVee
    Commented Jan 27, 2014 at 14:12
  • And to further clarify, all that line is doing is looking for the custom field "audio-file" in that post, and putting the value which is a url into a variable so we can use it in our array for wp_audio_shortcode. Let me know if this helps.
    – RachieVee
    Commented Jan 27, 2014 at 14:13
  • It absolutely helps, but I can't ask the user to create a custom field for every time they want to have an audio file as a featured audio, which is why I'm guessing I'll have to create a meta box that the user types in the url for the track. The problem with this is everytime I fetch the url from the metabox I've created it won't put it in the audio shortcode... I'll update my question with my current progress for easier understanding :) Commented Jan 27, 2014 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.