Adding MP3 Files to WordPress Themes

Adding MP3 Files to WordPress Themes

This is a guest post from the talented Joseph Hinson. Interested in seeing your name up here too? Get in touch!

In this post I’m going to talk about how to use WordPress’ attachment functionality to automatically detect and wrap mp3s in a player.

If you want to your mp3s to automatically be wrapped in a player, you can incorporate that functionality into your theme by using the JW Player (or any other embeddable player) and WordPress’ get_children() function.

Before we get started, let me explain why this might be a better option than using a plugin:

  1. All you have to do is upload the mp3(s) and the theme takes care of the rest.
  2. You get to learn more about get_children(), which you can do a lot with.
  3. The JW Player can handle video and audio, so with a slight code modification, you’re in business for playing movies as well as music.
  4. You don’t have to install a plugin that might break in a future version of WordPress.

The Player

MP3 Players in Action

There are several embeddable mp3 players that you can use. I was using google reader’s player for awhile until I realized it doesn’t work well in IE, so I decided to go a different route here and use the jw-player. Longtail Video’s JW Player is free for non-commercial use and works in seemingly every browser. It’s even got an easy setup wizard if you need help getting your embed code worked out. And though I use the term mp3 throughout this tutorial, the JW Player supports m4a as well.

The embed code for a single song looks like this:

In Action

The player looks like this:

I’m going to download the player and store all the files in a subdirectory of my theme called “jw”, so I’ll use the WordPress function template_url /jw/ to point to that directory. In reality, it’s http://my-site.com/wp-content/themes/my-theme/jw/.

The Code

In your template file ( index.php or single.php), we’re gonna use the get_children() WordPress function to get the attachments that match a specific mime type (of audio – that will handle mp3s and m4as). The function returns an array that we’ll loop through using a PHP foreach. So, here’s what we’re gonna do:

  1. Store the array that’s generated from the function in a variable called $mp3s
  2. Check to make sure the variable $mp3s isn’t empty (that an mp3 is present as an attachment)
  3. Loop through the mp3s attached, showing each mp3 in the embedded player.

The following code should take place inside the loop:

A few things to notice here:

  1. I’m passing a parameter to get_children of post_parent = $post->ID. This passes the ID of the page/post you’re on to the function. As long as you’re inside the loop, this will work, otherwise, you have to somehow get the ID then pass it in a different way.
  2. The parameter numberposts is set to -1, which means it will show every uploaded attachment that matches the mime type of audio. You can change this to a number if you would like to limit the amount of songs that show.
  3. I’m using $mp3->ID (the ID of the mp3 attachment itself) to make sure that each instance of the player has a unique ID, otherwise the players will break each other.

Once more, this time with Gusto!

This works well for showing the players, but what about the title and description? You can also pull that info from the attachment. In the next example we’re going to wrap each mp3 that’s attached in an li with the attachment title and description also being shown.

Take Note

  • I’ve wrapped the p and h4 tags in if statements that check to see if the values of the title and description actually have content before the elements are created. If nothing is filled in for a description, the paragraph tag doesn’t get created.
  • Helpful Tip: You can find out what is stored in any array by using the PHP function print_r(the_array_name). It will print out a list of values stored in the array. It gets a little jumbled in the content, so view source for best results if you use this.

Done and Done. But don’t screw up now.

Once you’ve inserted the code in your theme, all you have to do to to take advantage of your new found functionality, is upload an mp3 using the “Add Media” button through the WordPress Add Post page. Once you’ve uploaded your mp3, just click “Save All Changes” and close. Don’t click “Insert into post”. For some reason, the mp3 doesn’t get registered as an attachment if you insert it into a post.

Save All Changes

Before you guys give me crap about liking Carrie Underwood, let me just disclaim that this is for my daughter’s blog.

I’ve tested this with mp3s and m4as. For some reason, my WordPress install gave me a bit of a fit when I tried m4ps, but I’m pretty sure the JW Player supports them.

Even if this functionality isn’t something you specifically need, it is still a good exercise to try this if you’ve never learned about get_children(). You can do a lot to enhance your theme with it.

What about you? Do you currently use get_children() or something similar to beef up your theme? If so, tell me about it.

Further Reading

  1. Longtail Video – Home of the JW Player
  2. WordPress Function Reference – get_children()
  3. More About Mime Types

Posted Friday, April 23rd, 2010 · Back to Top

SPONSOR

Add Comment

45 Comments 29 Mentions

  1. Cook Author Editor

    good informative post….great help

    ·

  2. Jeff Crump Author Editor

    Interesting stuff. I’d like this to work on an the iPhone OS. Do you know of any solutions like this that do not use Flash as the engine?

    ·

  3. Joseph Hinson Author Editor

    Jeff,

    I recently was wondering the same thing. There’s an inline javascript solution called SoundManager2. It works in an iphone, but opens exclusively like youtube videos do. Seems like the best bet for iPhone though.

    ·

  4. Jeff Crump Author Editor

    Cool. Thanks for the response. Much appreciated. Your site consistently gives me great articles to read.

    ·

  5. Tony Gray Author Editor

    This is the perfect addition to my latest article at http://www.tgrayimages.com/automate-file-attachments-on-your-wordpress-posts. I updated my article according to your sample and linked back to the page for reference. Thanks! Great idea!

    ·

  6. Web Risorsa Author Editor

    Superb post with nice explanation… let me try it on my blog…

    ·

  7. free FONT Author Editor

    thank you for the tutorial.
    keep up the good work

    ·

  8. Thiago Cavalcanti Author Editor

    I’m making a electronic music blog right now and this will sure come in handy.
    Thanks!

    ·

  9. Deluxe Blog Tips Author Editor

    Nice post. The idea of getting all attached mp3 files via get_children is cool.

    Anyway, I think creating players for each mp3 file is not good. Instead of that, we should create a playlist.

    ·

  10. benjamin a. petersen Author Editor

    If you wrap your print_r function in html pre tags, it will display in a nice, neat, orderly list. This is SUPER helpful for seeing details more clearly.
    IE:
    echo “

    “;

    ·

  11. benjamin a. petersen Author Editor

    ha — after the echos it is supposed to have pre tags in that last comment — looks like they were stripped out! sorry guys.

    ·

  12. Joseph Hinson Author Editor

    benjamin,

    I have used that method before as well and it is very helpful. Thanks for contributing!

    ·

  13. DinoThemes Author Editor

    Awesome info, bookmarking for future reference!

    ·

  14. Chris Janus Author Editor

    ah, excellent! i’m working on a punk record label site and may very well be able to use this with it! i’ll be glad to learn a little about get_children() too and see how else that can be used in wordpress.

    thank you!

    ·

  15. Tutorial Lounge Author Editor

    really helping and this is an future enhancement.

    ·

  16. Abu Farhan Author Editor

    Thanks for this post, I like this way to put auto mp3 player to wp. Usually I used plugin but this way is better

    ·

  17. bulletin Author Editor

    hello. I think its just me, but i just cant get this thing to work on WP.
    Im sorry but i just dont understand where im supposed to put all (one of the three provided, right?) this code.
    I tried this on single.php (pasted the code somewhere) but im not sure..
    I made “jw” floder to my theme folder, uploaded the files (player.swf, yt.swf, swfobjects.js)
    And if i upload the *.mp3 file via “add media” and close the window. I have to use the “File URL” and add it to the code but there is where it gets kind a complicated to me..
    I think im missing something here, but i just cant figure that out. Please help me out.
    Thanks

    ·

  18. Rakesh Solanki Author Editor

    Quite interesting tutorial for those sites which provides some kind of online help.

    ·

  19. oliver Author Editor

    do i need to change anything else then the mime-type to get it work with video?

    ·

  20. Joseph Author Editor

    oliver,

    you should only have to specify the mime type and change the height to accommodate the video.

    ·

  21. jeza Author Editor

    I like the idea of putting this on my blog and adding a video on top. I will try this when my blog is good again, i was hacked :(its being fixed by the next couple days :)
    jeza

    ·

  22. nikhil Author Editor

    Its really helpful n nice post. yes ! now i can i add my fav MP3′s to wordpress and play it from anywhere. Thanks for such wonderful post.

    ·

  23. Seon Poppcile – London Author Editor

    Cool! I think I have just found my new favourite wordpress plugin.. JW player all the way – going to try it out now, thanks for sharing!

    ·

  24. Brett Widmann Author Editor

    This is just what I needed and it works great! Thanks for sharing.

    ·

  25. David Author Editor

    Joseph, thank you for the excellent article. I’ve been trying to tweak the code to get the song to automatically play. I know it’s autostart=’true’, but haven’t been able to get it to work. Any thoughts would be appreciated. Thanks again!

    ·

  26. Southom Author Editor

    Want it autostart. How to do?

    ·

  27. Pak Wandi Author Editor

    Waw, very excellent, I like it n I want to try it. Tanks alot.

    ·

  28. Khan Author Editor

    simply great, Earlier I was facing some issue, but after reading this great post, issued resolved.
    thanks buddy.

    ·

  29. Designer Renji Author Editor

    Useful post….thanks…………..

    ·

  30. Name.con.TC Author Editor

    Thank you a beautiful subject :)

    ·

  31. dj course Author Editor

    This will be very useful for my dj course blog – never been able to post mp3s, I put it in the too hard basket and finally the solution has landed on my lap! BANG!!!

    ·

  32. ParituS Author Editor

    Was this working for me too, thanks

    ·

  33. F4MU5 Author Editor

    This is just what I needed and it works great! Thanks for sharing.

    ·

  34. F4MU5 Author Editor

    This site gives me great content to ready everyday.

    ·

  35. Norton Author Editor

    Thank you for sharing. They are useful.

    ·

  36. medyabahcesi Author Editor

    Was this working for me too, thanks

    ·

  37. Barry Author Editor

    Thank you for your introduction, now i know how to do it.

    ·

  38. Roger Vivier Chaussures Author Editor

    Roger Vivier Chaussures

    ·

  39. Filmy Download Author Editor

    I like this blog very much, Its a real nice billet to read and receive info . “Do pleasant things yourself, but unpleasant things through others.” by Baltasar Gracian.

    ·

  40. cleaning services west chester pa Author Editor

    Thanks for the great info.

    ·

  41. storage sheds ct Author Editor

    Good article , thanks and we want more! Added to FeedBurner as well

    ·

  42. parth patel Author Editor

    nice one……………

    ·

  43. decidehost.com Author Editor

    great tutorial. will add this tutorial in my website.
    Thanks.

    ·

  44. Kredit Schweiz Author Editor

    There are certainly plenty of particulars like that to take into consideration. That could be a nice level to bring up. I offer the ideas above as basic inspiration but clearly there are questions like the one you bring up where the most important factor might be working in sincere good faith. I don?t know if best practices have emerged around things like that, but I’m certain that your job is clearly recognized as a fair game. Both girls and boys really feel the influence of only a second’s pleasure, for the remainder of their lives.

    ·

  45. dgdhfbhf Author Editor

    nice one yar

    ·

 

Build Internet by One Mighty Roar. Since 2008.