Storefront Xyloto theme, how to add the currently playing track title to the music player.

I was asked, “Is there a way to have the active/playing track or file name visible in the sidebar?’

It turns out this is very easy. A simple PHP edit and a small about of css and you are done. A five minute job.

First add track title to the PHP

Luckily the player includes the code to make this possible. So first you need to make a couple of small changes to the “header.php” file which is in your Xyloto theme folder.
If you have not done this before jump in these are very simple changes. In fact so simple I suggest you just do them by going to Appearance/Editor in WordPress and opening the file from the list. If you make a mistake and break something restore the file from the theme zip file download.
Of course if you have a proper code editor with line numbers etc go ahead and use it. If you would like to have a free proper code editor see the Note panel at the end of this post.
Around line 115 you will find the code below. Normally with a big fie I would say get that code editor with line numbers. This will be easy to find though, it is at the very end of the file.

				<div class="jp-playlist">
					<ul>
						<li></li>
					</ul>
				</div>
				<div class="jp-no-solution">
					<span>Update Required</span>
					To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
				</div>
			</div>
		</div>
<?php } //END SHOW NAV PLAYER ?>

You will make two changes so that it looks like this

                <div class="clear"></div>
				<div class="jp-playlist">
					<ul>
						<li class="track-name"></li>
					</ul>
				</div>
				<div class="jp-no-solution">
					<span>Update Required</span>
					To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
				</div>
			</div>
		</div>
<?php } //END SHOW NAV PLAYER ?>	

The highlighted lines are the ones of interest

1. Add this whole line. To align the title below the track time we must insert a clear div, it functions much like a line break in text but for div’s (containers) in this instance
2. To make the track name display we add the player class ‘track-name’ to the existing list item.

Ok go and reload the site and take a look. You may need to actually close the site, clear your browser cache and then reload the site. Because Ajax does not load all of the page contents when changing content, which is great for the user, you sometimes need to take this extra step while developing to see your changes. You should see the track title.

Lets Style it

The look is up to you. I am going to add a whole bunch of styling to it so that you have all the options to choose from. Just use the bits of CSS that you want, most likely only a couple will be of use. Also we are going to use a cool advanced CSS selector “before” to allow you to add some text to make it clear it is the track/song title.

I will put the whole block of CSS here for you lazy folks to copy and paste. This goes in your Xyloto themes custom.css file. See the note panel at the very end of this post. See below the code for an explanation of each section.

/* the text that will appear before the track name */
.track-name:before {
     content: "Track Title: ";
}

.track-name {
     background: none repeat scroll 0% 0% #E1A2AF;/* you could use an image see below */ 
     border-radius: 3px 3px 3px 3px; /* more info see below */
     border: 3px solid #FFFFFF;/* more options see below*/
     font-size: 14px;
     font-style: italic;/*other option normal*/
     font-weight: bold;/* other options lighter, normal, bolder */
     margin: 10px 5px 7px 3px;/* in order top right bottom left */
     padding: 5px 4px 2px;/* in order top right bottom left */
     text-align: center;/* other options left, right */
}

Some links to explain your options for some of the CSS above

Background you could use an image see http://www.w3schools.com/cssref/css3_pr_background.asp
Border radius explained http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Border see http://www.w3schools.com/css/css_border.asp
Margins http://www.w3schools.com/css/css_margin.asp
Padding http://www.w3schools.com/css/css_padding.asp