HTML5 WordPress Music Player & Settings Page Integration

I will be showing how to integrate an HTML 5 Music Player into WordPress. After that we will be adding a Settings Page ("theme options") so you can allow for easy player customization!

This music player has finally made its way to WP! The design was originally created by Orman Clark after which Saleem from Codebase Hero created a jQuery plugin out of it.

Today I will be taking that plugin and integrating it into WP. I would like to point out that I'm not an advanced WP developer and the code that I will be using is compiled from various tutorials across the web. I would just like to share with everyone how I did it. Also I will not be going into explaining the jQuery plugin code created by Saleem, I can help answer any questions but best thing to do is to just head over to the plugin page and go through the documentation. You may download the source files and customize it to your preference. Well, lets fire away..

Things We Will Do

Hopefully by the end of this tutorial you will be able to:

Integrate HTML5 Music Player into WP

Create Custom Post Type + Custom Meta Box

Create Settings Page for your Music Player

Step 1 Download Source Files

First download the required source files and copy folder named "blank" into your wp-content/themes/ folder where all your themes are located. You will need the files to complete this tutorial!

Pretty basic stuff here, this will create a new post type called Playlist in our admin dashboard menu. For now you won't be able to see it yet, because we haven’t actually attached it. So for that we need to go back to the main theme directory and open up functions.php file. Add the following.

Go back to your dashboard and refresh the page, you should now be able to see Playlist in the menu. Click on Playlist and you'll notice that right now we have the default columns that display the Title and Date. We want to go in and change the columns to something more relevant for our post type. We will add columns for Album Cover, Track Title, and Artist Name. Open up playlist-post-type.php and add this.

That looks much better, don't you think? Ok, lets add some more stuff to this file. I want to have a custom icon for this post type. If you hit Add New Track you'll notice that the current icon is just WP default "pin", lets add the headphones icon instead.

We will add some styles later, for now lets continue adding things to our post type. The last thing left to add is meta box. Before we do that we need to know what type of inputs we need to add. That's easy because we already know since we are building upon a "finished" product. HTML5 Music Player contains a file with the following options.

Please note that we are also closing the php tag at this point. We will reopen it later. We had to close php because we will be adding some html to the file. Above we created a function that will look through each of the input field and see if anything was saved, and if so it will auto fill those values into the fields. Lets add the inputs

Try it out. Hit Add New Track and you should now see the input fields. Also you'll notice that I added a link under OGG input, that's just something I found online for converting mp3 files into OGG format online. We'll style the whole thing later, for now lets make sure those input fields actually save our input, add this code.

Ok, now if you try saving, it will save the data. We now have fully functional custom post type. Lets add some css to it. Open playlist-style.css, remember earlier we added a custom css file into our custom post type code? Lets style those inputs. Add the following.

This is our custom loop for custom post type "playlist". I am using get_post_meta to pull the required data. This is all that we need for the loop. In the next section we will fire up the actual music player. Actually before we go on we need to make small addition to the functions.php file. Open it and add the following line in the // Post Thumbnails area. This is to make sure that when someone add a featured image it crops it to 125x125.

If you followed the tutorial correctly you should now have a fully working music player. Congratulations!

If you made this for personal use you can just easily change the appearance of the music player as you see fit. But if you are like me and choose to take it even further than lets keep going. For example if I was making this for a client I know they wouldn't want to have anything to do with css files. I need to create a "theme options" page. For this tutorial I will call it Player Settings page and we will stick it into the Playlist menu just below the Add New Track.

I won't be making too much options, but just enough for you guys to easily just add more if you need to.

Step 5 Player Settings - General Appearance

Copy settings folder from the downloaded source files and paste it into your blank theme folder. Inside the settings folder create a php file and name it settings.php than open up css folder and create settings-style.css. Than go back and inside the js folder create file called settings-script.js. See folder structure picture below and make sure everything matches up!

Settings.php

Yes, open up settings.php and lets write some options. First we need to do is attach those css and js files we have inside the settings folder. Use this code to do that.

Here we added js and css for colorpicker as well as the custom scripts that we will write in a little bit. Next piece of code will initialize our options and add player settings page into the submenu of Playlist post type.

If you refresh your dashboard page you will not see the link as of yet, that's because we haven't actually told WP to run the settings.php file. So go back to the root of your theme folder and open functions.php and add this piece of code.

Now, go back to your settings.php file and lets keep going. At this point if you refresh your page it will give you syntax error. That's ok, because we closed the php while our function is still open. We will be adding html code inside that function. Once we finish adding the html code and close the function the syntax error will go away.

I added some comments into the code so I don't have to really explain what is what. If there are any questions please add a comment otherwise just look at the code its basic html. If you refresh now you will be able to see our new menu item named Player Settings show up. The page is blank with title and save changes button.

In the above code I already added some options. Basically this is the General Section Tab div that has two options. Options can be added by just adding another div with class "od-panel-field". The options that I added are Number of Tracks to show and Description of the music player.

Brief explanations about these two sections. In Appearance we added a checkbox if checked we will use jQuery to show options but if it's unchecked the options will be hidden. Available options are to change description text color and font size. In the Miscellaneous section we added just one option and that will be footer area text.

Nothing is being saved yet. Lets make sure we can save our options! Paste this last piece of code to the settings.php file. Make sure it's added to the very last line...

Now that all our options are being saved, lets make this page look good.

Javascript

Before we add the styles, lets add the javascript functions. Go into your js folder and open settings-script.js file. Add the following code. This is a function that we will use to change the color of a div to red when someone makes a change to any options.

Just below the previous code lets add this next code. We created a function to change the background color to red when someone makes a change, now we have to initialize it.

// If there was a change to the input fields fire up the 'activate_save_animation' functions
$('#od-panel input, #od-panel select,#od-panel textarea').live('change', function(e){
activate_save_animation(e);
);

You can give it a test now, try changing any options and you'll notice that the background around "Save Changes" changes the color. The next code will activate our tabs.