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!
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.