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.