Mixtape is a lightweight, one or two column, widgetized, Wordpress theme designed completely with CSS, sans image graphics. Similar to muxtape.com, Mixtape is ideal for sharing/listening to music online. This theme utilizes a combination of Sandbox — a valid XHTML / CSS selector rich Wordpress environment, Tripoli — a generic CSS standard for HTML rendering and SoundManager 2 — a new Javascript API that utilizes Flash audio capabilities. Mixtape was developed for WordPress 2.5+, but it should also work in 2.3.+. It has been tested mostly in Safari and Firefox but it should also maintain its look in IE 6 and IE 7 outside of a few font discrepancies. This marks my first stab at developing a theme for Wordpress so please let me know of any bugs you may find in the comments area.
Demo
Check out a live demo of Mixtape here.
* All of the music in this demo was borrowed from flwrpt.com/blog, a great collection of original vinyl music & record cover designs.
Screenshots
Check out a few of the display variations and the demo child theme (more on this later).
-
- This theme variation uses the home-1column.php file.
-
- This theme variation uses the home-2column.php file.
-
- This theme variation only uses the index.php file.
-
- This is how the sample Mixtape Remix Child Theme looks.
Download
PLEASE READ THIS before you download Mixtape: This theme doesn’t cost you a dime. All I ask is that you please keep a link back to allancole.com/wordpress as it requires in the license below. Also, if you have questions about Wordpress please visit the WordPress Documentation or Support Forums. If you find bugs, I will try my best to help you with them. Just leave a comment below or email me. Unfortunately, I won’t be able to help you customize this theme but I am open to suggestions for features that you may want to see in future updates.
Download Mixtape Theme 1.0.2
I will be updating this theme from time to time so subscribe to the feed to stay up to date.
Installation
To install, open the Mixtape Theme folder and upload the contents of the plugins folder to your wordpress/wp-content/plugins directory. Upload the mixtape folder to your wordpress/wp-content/themes folder. Then open your Wordpress Admin, activate the plugins under the Plugins tab, and select the Mixtape theme under the Design tab (or Presentation tab in versions prior to Wordpress 2.5).
Modifications
To get this theme up and running on your own blog/website. You’ll have to dig into the source code a bit but its nothing scary, I promise. You can do this with any text editor, or by viewing the Design > Theme Editor tab in the WP Admin (or Presentation > Theme Editor tab in version prior to Wordpress 2.5). For the most part all you will need is the Category ID of the posts that you will be using for audio. You can find this number here. Once you have the number it will need to be inserted into the template files below. I’ve left some commented areas in the code to help you find where to make these changes.
- home.php – 4 Category IDs changes.
- home-2column.php – 4 Category IDs changes.
- music-page.php -3 Category IDs changes.
- functions.php – 3 Category IDs changes.
- single.php – 2 Category IDs changes.
- single-cat-00.php – Change the file name to reflect the Category ID.
- category-00.php – Change the file name to reflect the Category ID along with 2 Category ID changes to the code.
This theme also come with 3 home page options. Rename either of the two home-Xcolumn.php files to home.php and they will become the home page template (Out of the box the home-1column.php file is renamed to home.php). The third option is enabled when neither of the two home-Xcolumn.php files are named home.php. In this case index.php becomes the home page. This is a little confusing now, but the next update should have this as an option from the admin.
Posting
Regular blog posts work just like any other theme. Posts that go under the music player category work a little differently. Here’s the break down of how it works.
- TITLE — This can be anything from the name of the artist to the title of the album or song depending on how you would the permalinks to work. The titles of the music player category are never actually shown (except for in searches).
- POST — In the section, all that is required is One (1) link to an mp3 from a folder in your ftp, an uploaded audio file, or external links to an mp3 file. SoundManager 2 does the hard work here and creates the player.
- TAGS — Anything can go here.
- CATEGORIES — Of course only select the category that is synced with the music player category (1 category per post).
- EXCERPT — This is where you enter the text that shows the Artist, Title, Label, Description, etc. For line breaks you will need to add a break tag( <br /> ).
- CUSTOM FIELDS — There are two optional custom field values that are easiest explained in this screenshot. Use “album-cover” for the thumbnail image and “full-album-cover” for the large scale image. It is also a good idea to set your ADMIN > SETTINGS > MISCELLANEOUS > Thumbnail Size to 100px X 100px and check off Crop Thumbnails before uploading images through the admin.
Child Themes
There are a couple of things that I will be adding to this theme as time goes on so I will definitely be releasing a few upgrades to the current version of this theme. To make sure that your Mixtape theme stays up-to-date, it would be a good idea to adopt the Wordpress Child Theme technique so that your design can be upgraded without interfering with any custom CSS or function.php edits. Ian Stewart, an apparent expert on the subject, has a couple of great articles over at Theme Shaper on How to protect your Wordpress theme against upgrades and how to create a Wordpress Child Theme. I HIGHLY suggest adopting this technique for the Mixtape theme.
Plugins
Mixtape uses 3 simple plugins, which are included in the download. They are highly recommended, but not necessarily required.
- WP-Typogrify (included) — Helps to make web type conform to printed type standards.
- Get Custom — Grabs the image links from the Custom Fields of each post so that the album covers show on the main and single pages.
Features
- This theme was built with an easy to integrate Javascript API called SoundManger 2 that turns certain mp3 links into instantly playable sound modules.
- For users who have the full version of the font: Helvetica Neue installed and activated on their machines, the headers and sub headers will display in HEAVY, ULTRA LIGHT and LIGHT weights, giving the theme an even cleaner look.
- I have tweaked the original Sandbox theme to suit the needs of this design, however much of the power of sandbox is left in tact. Follow this link to find out more.
- The download comes with a sample Child Theme that can be used to seamlessly change the design of the theme without changing the core files. This file (and any others that you might create yourself) is essential for future upgrades.
Caveats
- There is a limit to the maximum file upload size that is usually determined by your hosting provider. If you try to upload an mp3 file and it gives you some kind of message like “This file is too big. Your php.ini upload_max_filesize is 50M.” than you may need to see this wp forum thread or do a Google search to figure out how to resolve the issue on your server. OR you can simply upload the files directly to your server through FTP and create links to them manually. Either way will work.
- Sometimes an mp3 issue may come up where the audio plays super fast or too slow. This has to do with the mp3’s sample rate. Look here for more info.
Future Versions
Aside from basic bug fixes that are likely to pop up, the next version will include some sort of rating system for the sound posts. I am also thinking about adding some of the other mp3 playback styles from the SoundManager 2 examples. The next version will include an easier way to switch between the 1 & 2 column layouts from the admin. If it’s possible, I’ll also try to make the category ID editing an admin option as well which should make updating a breeze. As usual I am always open to suggestions or help with improvements. Let me know your thoughts in the comments section.
License
Mixtape is Copyright © 2008 by Allan Cole. It is released under the GNU General Public License, version 3, as published by the Free Software Foundation. Basically you can do whatever you like with this theme. I only ask that you please give credit where credit is due by providing a link back to my site: http://www.allancole.com/wordpress.
This theme is offered ‘as is’ so I don’t support theme customization but I will gladly help you with any bugs that you may find. Just leave a comment about it below.
ENJOY.
113 Comments
Looks like I found the answer to my last question. Static pages are indeed not intended to allow this kind of dynamic browsing through past posts. Will have to use something like category pages to do what I want.
Hi Allan-
Could you supply a list of site that are using Mixtape so I can get some ideas on how folks have customized it?
Hi Cathrine,
I don’t have an official list, but if you browse some of the other comment authors’ URLs I’m sure you will find some other Mixtape sites.
Hi Allen,
Just wanted you to know if I didn’t make it clear my last few comments that this theme is really great.
But I did discover a “bug” if you will.
The images for the music player have this for the alt tag:
which kind of sucks from an SEO standpoint.
Is there anyway to have alt tags on the music player images?
Hah, what I mean is that the alt tags are PHP code instead of actually performing the PHP to make the HTML alt tag.
Interesting. I didn’t catch that. Sorry about that. I will work on a fix ASAP.
Thanks for checking out Mixtape!
Hi Allan – We just love this theme at SunSound Studios in Grass Valley, CA. Thanks again for making it! Awesome for a first attempt (though I’ve never attempted!).
I am having trouble getting the large album cover images to appear on the single post page. I have checked everything, all the links and filenames, including making sure I have the 2 plugins it requires and looking “within the loop” for the code. But the large images are not showing up when I click on the small image.
Also – how do we get the Home page to *not* show the artist songs? Can we just delete the Home page if it’s not possible?
I think I got the category ID’s right cuz it’s mostly working. Although with functions.php I could only find 2 changes and you said there were more. ?
We look forward to getting an update! And we want to make a donation as soon as we are able.
Thanks and Peace,
Catherine and Michael
sunsoundstudios.com/cms
Hi again-
I found the changes to make in the functions.php – it seems there are 5 total (not 3). But I could be wrong…
Blessings,
Catherine
Yup there’s 5 edits.
I’ve updated the directions on this post but not in the download file. I need to fix that badly.
Hi again! We are obsessed, I know.
Do you think I should put the header image in the css or the header.php file?
Thank you!!
-Catherine
Hi Catherine. In my opinion, it is a little more semantic to use CSS for the header image.
Allan,
I’ve mostly finished putting together my site and I wanted to thank you again for your hard work on this theme. I’ve done a fair bit of hacking to customise it exactly how I want, but if you take a look you’ll recognise everything. Keep up the great work!
-Nigel
No Problem Nigel. I’m glad you’ve almost got it up and running! It’s kind of tedious to set it up, i know.
Hi Allan-
I am still having trouble getting the large album cover images to appear on the single post page. I have checked everything, all the links and filenames, including making sure I have the 2 plugins it requires and looking “within the loop” for the code. But the large images are not showing up when I click on the small album cover image.
Please take a look: sunsoundstudios.com/cms
Thank you,
Catherine
Hello, I had a quick question – on both the 2 column and 1 column home.php layouts, there is no nav-before link. or any kind of navigational function for the previous entries. I’ve tried replacing the code with the standard sandbox code and that doesn’t seem to do it either. I’m not sure how else I will direct people to anything previously written.
Thanks!
Matthew Rutledge
Check the css. If I remember correctly, I think the navigation links are hidden with a css display:none property. Modify that and you should get some nav links.
Also, I notice that if I change the_excerpt to the_content, the CSS properties for the mp3 portion stops working.
This is so strange, but no matter what I try I cannot get the theme to switch to the music player for things in my category (which is 10). I have made all the required modifications but I am confused because of a few things.
1) This site says there are 3 plugins required but the DL comes with 2.
2) There is no home.php included in the DL.
So I made the modifications as described above but when I post a post to my category with a link to the mp3 file in it, all I get is a blank page. (I am using the add link option in WordPress). If I just paste the URL in without using Add Link, it just creates a blank blog post with the URL in it as non-linked text. Help?
Hi Steve,
Thanks for checking out Mixtape.
Please review the instructions again. It sounds like you haven’t changed the file names correctly. You may need to start with a fresh installation of Mixtape and redo the required modifications from scratch.
Thanks for your reply, Allan. I actually tried reinstalling twice (once via WordPress.org and once from the downloadable file on this website).
I have renamed the category files to single-cat-10.php and category-10.php as per my Category ID (which I have repeatedly confirmed to be the correct ID), and edited all of the category references in the source (even going so far as to count all the changes in the document to make sure they are all accounted for as per the list on this page). and as far as I understand, I don’t have to rename any of the home*.php files unless I want to use one of the two alternate layouts, correct?
From your installation instructions:
“This theme also come with 3 home page options. Rename either of the two home-Xcolumn.php files to home.php and they will become the home page template (Out of the box the home-1column.php file is renamed to home.php).”
Out of the box, there is no home.php in the archive. Am I missing something here?
To continue:
“The third option is enabled when neither of the two home-Xcolumn.php files are named home.php. In this case index.php becomes the home page. This is a little confusing now, but the next update should have this as an option from the admin.”
I suppose this is the situation I am running with as I have no home.php (I just want the default layout as shown on this site). However, there are no category edits to make in index.php. Is this correct?
Also, the instructions refer to a third plugin, am I missing something? As per the instructions, “Mixtape uses 3 simple plugins, which are included in the download. They are highly recommended, but not necessarily required.” But then the instructions only list two plugins.
I have several years of experience running Wordpress (and currently I am running WP 2.7) and I know how to install themes and have done so hundreds of times. I am an experienced systems administrator and webmaster and I cannot see any mistakes I’m making in any of the edits you are describing, and I have went so far as to start with a stock/blank Wordpress installation and ONLY install this theme and its related plugins and I get the same results every time. (You can see what is happening by visiting the web page linked to my profile on this blog).
I really thank you for all of the amazing work you have done to create this theme so far; it’s beautiful and I want to use it very badly! Is this just not compatible with Wordpress 2.7 or something?
Regards,
Steve
Hi Steve,
Thanks for providing such a thorough explanation of your issue. I am sorry you are having such a tough time getting things working. Also, thanks for going through and clearing up some of my outdated instructions.
AS per the second instruction you referenced (“The Third option, is enabled…”) The index.php file is actually only meant for bloggers who don’t intend on using the music player and simply want their blog design in the Mixtape style. index.php does not pull in any of the Music player coding required for the music to play. This is definitely unclear in the instructions partly because the next version’s index.php handles both music and regular posts automatically. Have you only tried playing the music posts from the index.php file? Does the music play from the single.php or music category template files?
Regarding the plugins, that is simply a typo on my part. After I wrote the instructions, I decided to include one of the plugins in the functions.php file to save some installation time. I just never updated the instructions to reflect the change.
Hope that helps!
Hi, I need help.
The Links section is doubled. And when I go add sections to the sidebar, it just doubles it again? I have no clue how to read php. I don’t even know what section of the code the whole bottom section is under. I thought it’d be under “footer,” but it’s just the copyright I think. Where do I go to customize this a little more? And HOW would be the next one.
Thanks. =]
attached is a link to the image of my problem:
http://img5.imageshack.us/my.php?image=bottomf.jpg
Hi Sydni,
Thanks for checking out Mixtape. The good thing is you don’t need to know PHP to solve your problem. All you need to do is edit your widgets. Each sidebar has a default widgets layout that shows up if you don’t make any changes to one of the three sidebars. That is why you are getting a ‘doubled’ widget. Looks like all you need to do is edit Sidebar #3.
Hope that helps!
Is there anyway to disable the blog feature? When I post an audio file with some text it shows up as MUSIC and in the BLOG section. Just curious. I am in the early stages of adapting this great theme to a new music blog I will be starting. Thanks in advance!
Hi Michael,
The simplest way is to use CSS to hide the Blog box.
//Hides Blog content from home-1-column
#blog-content {display:none;}
Do you have a fix for how to take out the mp3 functioning on the home page so I can run this theme just as normal blog? great theme!
I thought I might reply to Steve… I was having the same problem, until I realized that I was neglecting to specify the file URL from the final Add Audio screen.
Very cool theme. Many cheers.
L
I’m glad I found your site. Very interesting reading indeed.
Thanks Erika.
Hi, I can’t seem to find the home.php, Could you tell me where it is ?
Hi Henry,
If you installed the theme files correctly you should have two home.php files — home-1column.php and home-2column.php. Please read the instructions carefully.
any idea where I would add the vote it up post loop to show up bellow the music?
fixed thanks to adydeejay
There are 2 default menu items – home & RSS
For the life of me I can not find how they are being generated or data in the database tables to remove them.
Please take my hand on this one.
Glenn
Glenn, the code you need to look into can be found in the functions.php file. Please search the Wordpress Forums for help making edits to the file.
I really like your theme, but is there any way to use it just as a regular blog without the mp3 featured posts. I know that’s the point of the theme but i really like it and I don’t need that feature.
Please help.
Thanx!
Hi Kosta,
There is a bit in the instructions, that kind of goes over this. All you need to do is delete the 2 home-Xcolumn.php files, making index.php your home page template.
Hi Alan,
Thanks for the great theme that you have built.
Question: how would I go about wrapping up the music category box/post for particularly long song/album descriptions (I would like to see a “Read More” link as is the case with ordinary blog posts)?
Upon hitting “Read More” I would have been taken to a next page where a full song/album description would be displayed.
Keep up the good work.
Hi Piotr,
I have a long overdue update this fixes this functionality. Unfortunately, you’ll have to wait for the update as it is not 100% stable just yet.
Hi Allen,
I would like to get rid of the player (( [play], [hide player] )) function. is that possible? and I have another question, can I align the audio timer to the far left? or the at least the title. because the language that I’m using in the blog is from right to left.
Thanks.
Both of these things are possible, but you will need to look into CSS and Wordpress Theme Development & customization
Do you think it is easy to do these customizations? or hire a designer for this? I barely know CSS and PHP.
I have downloaded a trial version of CSSEdit to play with it. Aligning normal text using this app is pretty easy. But I couldn’t align the timer and post title “in audio post” properly.
I think it’s pretty easy.
If you need support customizing it, you can book hours of support for $80/hour.
A block of 5 hours goes for $350. Contact me for more information.
Hey! Thank you so much for the amazing theme! I had a little trouble with the initial setup, but I got through it. I guess that’s what I get for doing it on no sleep. Haha. Anyway, if you go to where I have it setup, you might be able to see what my problem is. I don’t want a link to the file in the body of the most, and I would like to have the player show up right there on the main page like in the Mixtape Theme demo page. Everything just plays right there. Any ideas? Thank you so much!
Hi Brandon,
Make sure youve followed the instructions exactly. Its a little tough, i know, but thats the only way to get it working like how the demo works. A new version is in the works that’s a little easier to manage.
Well, I’ve followed the instructions to the T, and I realize how it would be very obvious that I did not. Haha. The contents of my post are as follows: < substituted as (
( a href=”http://www.letterboxten.com/letterboxeleven/wp-content/uploads/2009/06/3.mp3″) Thre3 (/a)
The setup instructions are most certainly correct. The posting instructions say insert a link to the song. Is this how that should look? I’m sorry to be so troublesome.
- Brandon
Yup. That’s right.
Yeah, I don’t get it then. In the post, I get would I would expect from typing that in. A text hyperlink. haha.
Hello Allan,
First off, thanks for designing this great theme. I am very excited to use it as a template for the blog that I have in mind. However I’ve run into a few bumps. The first is with Soundmanager 2. Is this an extra process I should figure out how to add to wordpress, or is it already written into Mixtape? If its included in Mixtape, when I add a sound file the player doesn’t respond, I just get a link to my mp3. Secondly, I’m running wordpress 2.7.1(a later version than you recommended), and feel like the theme isn’t exactly working properly, example – I dont get the Custom Fields values for cover art you described in wordpress. I tried creating them on my own however they didn’t work the same as your example site. I am very new to wordpress and using themes, however I feel like I’m a quick learner and am prepared to do the reading if need be to learn it. Any extra info/links you recommend to help me with these issues I’d be grateful. Thanks in advance for your help.
Hi Brett,
If you follow the instructions exactly, it should work for you.
hi allen, great theme!
i wanted to change a few things though and was wondering if it is possible. Can the other categories be set up to display like the frontpage throughout the entire theme? also is there a way to have a play and pause graphic?
Hey Jimmy,
I am working on a new version that should address these issues for you. I should be able to release it soon.
Weird. Do you have a live link I can check out?
Sure thing. It’s at http://www.letterboxten.com/letterboxeleven
8 Trackbacks
Mixtape…
Mixtape is a lightweight, one or two column, widgetized, Wordpress theme designed completely with CSS, sans image graphics. Similar to muxtape.com, Mixtape is ideal for sharing/listening to music online. This theme utilizes a combination of Sandbox —…
[...] und die neue Blog Software Habari läuft auch einwandfrei. Das neue Design basiert auf dem Theme Mixtape von Allan Cole. Dieses Theme ist eigentlich für Wordpress geschrieben. Doch ich habe die “freie” [...]
[...] This is my tribute to Allan Cole and his ”Mixtape Theme”. [...]
[...] Release Page [...]
[...] Demo | Download [...]
[...] Theme info Demo [...]
[...] Mixtape Theme [...]
[...] [...]