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!

Your directory should look like this: wp-content/themes/blank.

Ok, from now on we will be working inside your "blank" theme folder.


Step 2 Creating Additional Folders and Files

Go to your downloaded source files folder and copy the playlist folder into your theme folder. The folder contains 3 folder css, images, and js.

Those folders contain all the files and images that came with the HTML5 Music Player and we will not be editing those.

Lets create some more files. Inside playlist folder create 2 files playlist.php and playlist-post-type.php. Now open css folder and create a file playlist-style.css.

Take a look at the folder structure image below to make sure you have all the correct files.


Step 3 Custom Post Type - Playlist

Lets create the post type called playlist. More on custom post types at WP Codex. Open playlist-post-type.php file.

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.

I would also like to add custom css to our new post type so lets attach a css file to it, add the following.

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.

One thing I should point out right away is we will not be focusing on the "rating" part of the music player. Ok so from that we can tell that we need the following inputs:

  1. mp3 (meta input)
  2. ogg (meta input)
  3. title (post title)
  4. artist (meta input)
  5. buy (meta input)
  6. price (meta input)
  7. duration (meta input)
  8. cover (featured image)

Lets add meta box with those items. Below code will basically prefill input fields (we will make those after this) if there was something saved in them.

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.

We are now completely finished with our custom post type.

One more file to edit...

Remember this code I showed earlier?

That's basically all the information that we will be prefilling with our custom post type we created and the meta box. Open and add the following code into playlist.php.

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.

That should now look like this...

That's it, lets move on.


Step 4 Getting it Working - The Music Player

Ok, now that our custom post type is fully really lets connect it all to the music player.

Go back to the theme directory and open header.php. All the following.

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.

With our old functions.php code, the lines should look like this...

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.

Lets keep adding code to the end of settings.php file.

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.

Lets add some pages to it.

Those will be our tabs. Now we will add a container for the tab page, assign each section an id so we can later target that specific page to the tab.

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.

Lets add the other two sections. Player Appearance and Miscellaneous

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.

The next piece of code is used to see if the checkbox in the Player Appearance section is checked or not. If it's not checked it will hide the div with an id of "extra".

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.

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.

Test it now, they should now navigate to their specific tab content. The last code we will add is for the color picker.

That should be the whole js code we'll need.


CSS

Lets make sure everything looks good. Go to css folder and open settings-style.css file. First bit of code will fix up the layout a bit and add some icons.

The last css code will style the buttons and the form fields.

That is all for css styles. We are now completely done with the settings page.


Hooking Up Our Options

Ok, lets hook all our options to our music player. Go back to the theme root folder and open header.php file. On the very top of the file add this piece of code, it will get all of our options.

Add this code bellow the <!-- Playlist Styles --> section, where your css is. This code is our custom css style which we set up in the Player Appearance settings page.

You can now add some custom color and text size to the description text. Try it out and if all went well, they changes should take effect.

Lets make some more changes, find this js code just below...

We have the option to change the number of tracks and the description text. Lets add some code so it can actually work. Change this:

To this...

Now, we can tell the player how many tracks to show from the settings page. The description text can also be set.

We have one more file to edit and we'll be done! Open footer.php file. Replace all the code you see with this one...

This is for the Miscellaneous section where you able to add your own footer text.


We are done!

That is all, we are now finished with the music player and a custom settings page!


Feel free to comment on improvements that can be done or if you have suggestions, like I said I'm not a pro and this is how I got it to work.

Tags:

Comments

Related Articles