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 — 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).

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.

  1. home.php – 4 Category IDs changes.
  2. home-2column.php – 4 Category IDs changes.
  3. music-page.php -3 Category IDs changes.
  4. functions.php – 3 Category IDs changes.
  5. single.php – 2 Category IDs changes.
  6. single-cat-00.php – Change the file name to reflect the Category ID.
  7. 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.

  1. 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).
  2. 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.
  3. TAGS — Anything can go here.
  4. CATEGORIES — Of course only select the category that is synced with the music player category (1 category per post).
  5. 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 /> ).
  6. 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.

  1. WP-Typogrify (included) — Helps to make web type conform to printed type standards.
  2. 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

  1. This theme was built with an easy to integrate Javascript API called SoundManger 2 that turns certain mp3 links into instantly playable sound modules.
  2. 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.
  3. 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.
  4. 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

  1. 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.
  2. 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.

143 Comments

  1. Matt
    Posted Jul 6, 2009 at 1:58 am | Permalink

    Great theme. Two quick questions:

    When I change the permalinks to be more SEO friendly in the General Settings area, the theme stops showing any posts. How can I fix this?

    In the theme demo, in the navigation bar you have a link to all the Music. Is this just a link to the category page or are you pulling the music posts on a page?

    • Posted Jul 14, 2009 at 10:24 am | Permalink

      Hi Matt,
      I’m not sure about the permalinks problem(do you have a live example?) but the Music page is using the music category template.

  2. Posted Jul 8, 2009 at 8:02 am | Permalink

    Hi Allan! Great website and themes! I am currently using Nautica but i am considering switching to Mixtape, as i love the simple and clear layout but i was wondering is is possible to transfer some of the ‘magazine’ properties of Nautica to Mixtape? Mainly the ‘read more’ bit of the post rather than the entire post being on one page. I run a music and movie blog.site and this was one the main reasons i used Nautica. I hope i’m making sense.Any help would be appreciated! Keep up the good work! x

    • Posted Jul 14, 2009 at 10:41 am | Permalink

      Hi Aneet,
      With a little theme custimization I’m sure you can put together some type of hybrid.

  3. Vivs
    Posted Jul 30, 2009 at 4:30 pm | Permalink

    Allan:
    You, are, amazing. This theme is amazing, it’s beautiful. It’s like falling in love all over again.

    The only problem I had was that my Links were showing up more than once at the bottom of the site. All I did was install the theme. What did I do wrong? :’( It’s breaking my heart.

    • Posted Aug 3, 2009 at 4:49 pm | Permalink

      Thanks Vivs,
      Simply re-arrange your widgets and things should look how you would like them to.

  4. Vivs
    Posted Jul 30, 2009 at 4:38 pm | Permalink

    Ugh, don’t you hate it when you have brain farts? My apologies, my site looks fabulous thanks to you. Thank you so much for an amazing job!

  5. Posted Aug 5, 2009 at 4:03 pm | Permalink

    I want to try this out but the link to the download for the Mixtape theme isn’t working. Could you reup it or give me a new link?

    Thanks.

    • Posted Aug 10, 2009 at 2:14 pm | Permalink

      Hi Matthew, The download links should be working now. You can always just grab it from the WP Themes Directory.

      • Posted Aug 10, 2009 at 3:31 pm | Permalink

        Thank you. I did get them from the wordpress themes directory.

        • Posted Aug 10, 2009 at 3:43 pm | Permalink

          Awesome. I’m also working on a kind of major update. Everytime I get ready to release it I find a major bug in it that postpones the release. Hopefully, I’ll have this newer version stable soon.

  6. John
    Posted Aug 13, 2009 at 2:03 pm | Permalink

    Hey Allan, Im currently loving your autofocus theme, and as I dive deeper into your designs I really was impressed by Mixtape, I have searched through these posts and couldnt find a download link that actually worked. I dont know if you took the link down or if Im having trouble with it. I am currently running the latest version of Sarari on a Macbook Pro, I tried to “view source” and create my own css file but I’m having trouble in dreamweaver creating a database, could you please help me so I’m able to download the theme. Thank You for your time.

    John

    • Posted Aug 13, 2009 at 3:10 pm | Permalink

      Hey John,
      The link should be working correctly now…Not sure why it keeps coming down.

      • John
        Posted Aug 13, 2009 at 4:00 pm | Permalink

        Allan,
        I appreciate your time, and thank you for fixing that link. Keep up the great work.

        John

  7. Posted Aug 17, 2009 at 7:25 pm | Permalink

    hi allan, great theme! problem is, i just can’t get it to work as intended (much like Steve’s post). i’ve followed the instructions to the tee, and tried reinstalling as well. all i’m trying to do is set it up just like the demo i’m just stuck at a roadblock, and i’m dying to use this awesome theme, and would appreciate your help…

    1. album cover – the main problem i’m having is that it won’t display Album Cover images correctly when entered as a custom field. for some reason, it won’t display the small album cover at all, and it stretches the main image

    2. possibly related, but renaming either version of the homepage to home.php yields the following error:

    “Catchable fatal error: Object of class WP_Error could not be converted to string in /home/content/j/u/s/justinrhyme/html/wp-content/themes/mixtape/home.php on line 13″

    3) I can’t seem to get a separation between “Music” category posts, and Blog posts, as shown in the sample demo site.

    - i’ve changed all the category IDs (09 in my case).
    - i’ve installed the plugins (the versions you’ve included are older, but i don’t think that would make a difference? i’ve tried both old and new versions)

    i would really appreciate any suggestions or help here – i’ve had quite a bit of wordpress experience, but none that used SoundManager… thanks in advance!

    • Posted Aug 22, 2009 at 11:52 am | Permalink

      Thanks Justin,
      Right now I’m working on an update that will make all of this a lot easier.

  8. Posted Aug 18, 2009 at 9:06 pm | Permalink

    Hi Allan,

    I try post a mp3 link, but the player don’t work.

    thanks

  9. Posted Aug 20, 2009 at 6:53 am | Permalink

    Precioso, es un theme increible. Felicidades!

  10. Posted Oct 2, 2009 at 10:52 pm | Permalink

    the best. wordpress theme. i have ever. seen.

  11. Posted Oct 3, 2009 at 4:19 am | Permalink

    Hi Allan,

    Please be informed that I’ve installed IE8 recently and I continously receive the following error:

    Webpage error details
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Creative AutoUpdate v1.40.01)
    Timestamp: Sat, 3 Oct 2009 07:15:32 UTC

    Message: Error: Invalid argument.
    Line: 572
    Char: 29
    Code: 0
    URI: http://adydeejay.ro/wp-content/themes/mixtape/sound-manager/script/soundmanager2.js

    When I click on the mp3 link, the download popup appear, the player is not working anymore … I’ve checked everything and decided that IE8 is culpable for all this mess… since in Firefox your theme is working great (as always) ! :D

    Is there a fix for this error?

    Thanks in advance,
    Ady

    • Posted Oct 11, 2009 at 2:20 pm | Permalink

      Hey Ady,
      This looks like an error in the Sound Manager plugin. You may check on the Sound Manager site.

      • Posted Nov 13, 2009 at 3:33 am | Permalink

        Hi Allan,
        Happily, the error I’ve mentioned disappeared after upgrade to the last version of WP (2.8.6). :)
        All the best,
        Ady

  12. Posted Oct 22, 2009 at 3:59 pm | Permalink

    Allan,

    I love the themes. Any estimate on when the next update of Mixtape will be available?

    Thanks!

    Kevin

  13. Posted Jan 12, 2010 at 10:43 am | Permalink

    This is a very pretty theme. I’m slowly beginning to customize it and looking forward to the next update. I have two issues that maybe you can consider when updating the theme.

    Is there a way to protect the audio files (and the cover art) so that their complete URIs are not visible in the web page source?
    Pardon my paranoia :)

    Also, the theme does not play well with SexyBookmark sharing plugin, this might be an issue with that plugin’s code though.

    thanks,
    Seba

    • Posted Feb 3, 2010 at 4:12 pm | Permalink

      I SebaSz,
      When I update this theme, I’ll also update the SoundManager 2 plugin which now allows you to protect the mp3 URLs.
      Image URLs will probably never be protected though that way though.

  14. Josh
    Posted Jan 22, 2010 at 7:51 pm | Permalink

    This is one of the most genius wordpress themes I’ve ever seen. Some fantastic work. Two questions: 1. what does it take to hire you?
    2. In the Mixtape music posts, it does a pretty decent job of managing multiple mp3 files in one post. The only error comes with the count-down mp3 timer in the top right, each count-down begins to overlap each other. How can I either fix this or remove the count-down?

  15. Raize
    Posted Feb 4, 2010 at 11:48 pm | Permalink

    Hey Allan, thanks for the amazing theme. It’s definitely ahead of it’s time, and I’m glad you are still planning on an updated version (patiently waiting).

    My question is…how do I get rid of the RSS button in the navigation? Or better yet, where is the code located? I looked in header.php and index.php and haven’t been able to find anything. Little help? :)

    • Posted Feb 23, 2010 at 9:06 am | Permalink

      Raize,
      You could comment the following line in /wp-content/themes/mixtape/functions.php:

      // echo ‘RSS‘;

  • Categories

  • Archives