How To Create a Popup Music Player Using the Simple Popup Plugin and XSPF Player for WordPress
Requests have been abundant when it comes to using my Simple Popup Plugin for WordPress to create a popup music player. Thus, I have written this guide to help you on your journey of musical satisfaction.
Here’s what we’re going for:
Download the Plugins
Download and install/activate the XSPF Music Player plugin and this Simple Popup plugin.
Create Page Template
Create a page template to be used for the page that you intend to popup. This should be very minimal, ie no sidebar, navigation, etc. You basically just want an empty page with maybe a background color and possibly some links associated with your music (facebook, myspace,…).
The XSPF Player plugin requires you to add this tag in the body of this template for the player to show:
<?php xspf_player::start('playlistname'); ?>For info on creating a page template see the WordPress documentation. If you like you can download this music player popup page template which already contains the XSPF Player tag and place it in your current theme’s folder for it to work.
Create New Page
Create a new page (not page template) in WordPress with no text in the body and choose the page template you just created from the template pull-down menu.
Link it Up
Using the Simple Popup Plugin shortcode, template tag, or widget create a link to your newly created page wherever you desire. Set the dimensions for the pop up in the Simple Popup Plugin’s options page.
And that’s it! Ain’t no thang.
Categories: Tutorials, Wordpress Plugins
Listen to My Music
Sketchup
Hey Garrett,
That’s awesome, good job. Would it only work with WordPress, or could I put it on my site too? Just paste your code in and follow your steps?
~Corinna
Yo Corrina, this method is just for WordPress but you can still add a music player to your website by using something simple like this http://www.premiumbeat.com/flash_resources/free_flash_music_player/ Let me know if you would like my help.
Thank you so much for reply to my e-mail. I still trying to make it work, but I think that problem is my luck on knowledge know how to use wordpress. I am knew at it.
I was able to install the xspf player and I uploaded some songs, which I preview under option. But, when I pest this code ” ” into a page (HTML) and hit preview to view my site, the same code () shows up on my webpage.
My question is do I need to create a template for xspf player?
How do you make the my list show up using “” ?
I am trying to make that xspt player work before messing with the up awesome popup.
Where exactly do you put
in the “simple page template” that you made.
I dled that.
Could you paste the exact code up please?
Great Tut. Have been wanting to use same player for some time, but it would always reload or disapear when you click a link within a site. Now it can float. WOOT!
Why isnt the < ?php xspf_player:….not coming up..not sure. thats what I was asking about..
Hi Marco, the XSPF Player tag must go in the page template somewhere between the
and tags. If you still have problems try downloading the page template above again; I updated it to have the tag already in there.well I got it working, except the code that shows above it. Also I also trying to have the songs to play in a certain order, not sure how to do that. and then of course keep my heavy metal away from my salsa and divide into categories. Not sure how categories are implemented in the player.
I found out that it looks like the player puts song in alphabetical order according to song title..kind of frustrating. I did a search a few years back that describes how to do playlists, but forgot where the link is.
Hey Marco, good I’m glad you got it working. Yea you’re right, it sorts the tracks alphabetically by default. I’ve been ok with this, but definitely if you find out how to change it post it up!
i can’t use this player unless i have control of the track order. does anyone know if it is possible to make the tracks non-alphabetical?
Not sure, to put the tracks in order of how I wanted them to play, I just added alphabetical letters to the start of the names of each song. such as a, b, c, d to play in order I wanted.
that’s funny! i just did the same thing. the only problem is it doesn’t look very cool. i hope i can figure out a way to fix this, because i really like this music player……
ya thats the only bummer.
so marco, did you create the player? i’m assuming that someone else must have created it, maybe it would be worth it if we asked them about this. it’s probably a very simple edit somewhere in the code for the player. what do you think?
garrett,
thanks for the suggestion, i checked out the message boards and found this:
http://www.boriel.com/forum/viewtopic.php?f=1&t=49&p=62&hilit=alphabetical#p62
it seemed to relate the problem to the template page, so i’m wondering if maybe there’s a way to modify the template page. i hope you don’t mind me asking what might be a totally obvious question, but i’m a total rookie at this stuff and am not sure what to make of it. if you have a minute, would you mind explaining what boriel says in the above link? i got very confused reading it.
No not me, I believe it’s Garret. I have not messed with the code since I am a noob with programming. I am using simple popup plugin with wordpress and the player together.
Hey guys, I created the popup plugin but not the actual music player. The author of the music player’s site is http://www.boriel.com/plugins/the-wordpress-xspf-player-plugin/ He’s got a forum on there where you can ask questions. Hope that helps!
garrett,
thanks for the suggestion, i checked out the message boards and found this:
http://www.boriel.com/forum/viewtopic.php?f=1&t=49&p=62&hilit=alphabetical#p62
it seemed to relate the problem to the template page, so i’m wondering if maybe there’s a way to modify the template page. i hope you don’t mind me asking what might be a totally obvious question, but i’m a total rookie at this stuff and am not sure what to make of it. if you have a minute, would you mind explaining what boriel says in the above link? i got very confused reading it.
Been following your blog for a while… good stuff
Thanks………………………….
Anyone know how to change the actual location of the popup window? By default it now pops up right in the middle of the page and is distracting. Before, it used to popup in the upper left hand side.
Hi Marco, in the settings page you can adjust the distance from the top/left in pixels. If both are left at 0px the window will automatically center.
hey Garrett,
Cool plugin… I am have one issue… I cant change the size of the popup window… is there a way to hard code this or any other ideas?
Thanks
Hi Lee, you can’t change the size of the popup from the options screen? What happens when you do, does it just not work?
-Garrett
Best regards.
Thank you for wordpress simple popup plugin.
If you can look popup window to do to be attractive? Something like faceboox or modal popup.
Thank you, sorry for my english.
Best regards.
Thank you for wordpress simple popup plugin.
If you can look popup window to do to be attractive? Something like faceboox or modal popup.
Thank you, sorry for my english.