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. Posted Jul 30, 2008 at 12:01 pm | Permalink

    This is a wicked theme, Allan. Awesome job.

  2. Posted Jul 30, 2008 at 12:28 pm | Permalink

    Thanks Ian!

  3. Posted Aug 9, 2008 at 11:24 pm | Permalink

    Awesome, this is one of the greatest theme i´ve seen in the last time, great job.

  4. Posted Aug 14, 2008 at 7:22 am | Permalink

    Thanks for this post

  5. Posted Aug 16, 2008 at 6:13 am | Permalink

    cute template! simple, clean and perfect functionality. i definitaly use it but it needs some modification work. i added a single page template to have comment function for pages (not only posts). then people may want to download the mixtapes and want to look for a download button (which is not included atm). and it needs some more style updates (links too big within mixtape posting).
    in case you need a beta testing guy, here i am!

  6. Posted Aug 16, 2008 at 9:56 am | Permalink

    @[in]anace: Thanks! Glad you got it working. Two things:

    1.) Adding comments to the single pages is actually really simple. All you have to do is add a Custom Field KEY and VALUE of ‘comments’ to the page under Advanced Options(screenshot). Just one of the many great features built into the Sandbox theme. No template editing required. Guess I should have mentioned that in the documentation :-).

    2.) I agree with you about a download button. I just always assumed users could do a simple Right click > Save As… to download the mp3s, but a more obvious download button could definitely make things easier for people. I will look into making this an option in later a version.

    I will try and get a beta download to you when the next version is near stable. The feedback is greatly appreciated!

  7. Posted Aug 18, 2008 at 6:09 pm | Permalink

    Dope theme. I have buddy in the music biz and I think I may use it for his wordpress powered site.

  8. Posted Aug 18, 2008 at 7:35 pm | Permalink

    Thanks Teech,
    Hit me with a link when your friend has it up and running.

  9. Posted Aug 19, 2008 at 9:18 am | Permalink

    This is tight AL, wish you would have made this two years ago LOL! I would have used it for my blog HAHAHA!!! It’s super smooth and clean man.

    Good ish.

  10. Posted Aug 28, 2008 at 1:39 pm | Permalink

    Hi Allan,

    First, let me tell you that I’m almost “0″ at PHP.
    After months of searchings, reading carefully your instructions and learning ~2-3 weeks about the wordpress and its plugins, I’ve finally re-designed my website using your own theme “mixtape”.

    This theme is amazing. In fact, is what I was looking for for years! All my friends ask me about it. This is awesome man! Just waiting for the next release.

    Keep it up man!

  11. Posted Aug 28, 2008 at 3:26 pm | Permalink

    Thanks alot Ady!
    Glad you got it working! The next version will probably come sometime in September.

  12. Posted Aug 30, 2008 at 5:34 am | Permalink

    You’re welcome, Allan.
    Thank for this info. Just waiting for September :D

    I worked very hard to get the vote bar and all the media details inside your script. Could be useful if you’ll integrate somehow in your great theme, as for any media content, the components we mostly share with the audience:
    - listen option protected : sometimes the script is not loaded for a visitor and the “save as” option appears
    - download link : Leech/Hotlinking Protection
    - lyrics : could be integrated in the post content (now I’m using a comment : http://adydeejay.ro/?p=90)
    - voting system : very hard to have one? – should be a simple one
    - votes : still cannot find a way to display the number of listens next to Edit/Comments… I’m using a bar right now
    - charts (based on the votes – multiple or one per session and not Widget – see “Most Voted Posts” under “Covers”)
    - song details: adding all these information (composer, lyrics, vocals, remixer, producer, copyright & version) using Excerpt was a real challenge for me :)
    - mp3tag : shouldn’t be do hard to be extracted from the mp3 file(?) : artist, title, time, genre, album, size, etc.

    I hope all these suggestions will help you to improve your awesome script.
    Sincerely yours,
    Ady

  13. easyclick
    Posted Sep 1, 2008 at 11:43 am | Permalink

    love it! is there any way to prevent website visitors from being able to download the songs on the mixtape theme? Just want to be in order of some local laws in Europe…

  14. Posted Sep 1, 2008 at 1:35 pm | Permalink

    @easyclick: At the moment there is no way to protect the download link. It’s just one of the limitations of the SoundManager 2 API. If this changes at some point I will definitely incorporate it into a future update.

  15. Posted Sep 1, 2008 at 2:07 pm | Permalink

    @Ady DeeJay: Hopefully this answers everything.

    • - listen option protected: I am not sure why this is happening. Anyone getting this error probably needs to enable javascript in their browser to get it working.
    • - download link: At the moment there is no way to protect the download link. It’s just one of the limitations of the SoundManager 2 API. If this changes at some point I will definitely incorporate it into a future update.
    • - lyrics: I probably won’t add any functions specifically for lyrics, but the next version will give you more room for written content in general.
    • - voting system: At the moment I haven’t looked into adding any voting/rating systems.
    • - votes: This would be a tough one to pull off. Not impossible, but it would require some database query stuff that’s a bit out of my league. Any PHP gurus out there are welcome to help out. ;-)
    • - charts: Not sure what your asking for in this one.
    • - song details: In the next version, it will be easier to include and format this type of information using excerpts or normal post content.
    • - mp3tag: I doubt this will ever be added. It’s another limitation of the Sound Manager 2 API.
  16. Posted Sep 1, 2008 at 3:08 pm | Permalink

    Thanks for the answers, Allan.

    “- charts: Not sure what your asking for in this one.”

    For the charts, I’m thinking about something I already have on my site (as Widget) but more complex, based on votes the songs receive and available for sorting (by artist, genre, etc.). You cand see my little/simple “Chart” in action (bottom of my page : sidebar 1) which is based on the “Most Voted Posts”, Widget from the “Vote It Up” plugin.

    Thanks again for everything.
    Ady

  17. Posted Sep 8, 2008 at 3:50 pm | Permalink

    Hey Allan, i’ve been tooling around with your theme, and it rocks – but unfortunately, posts that are meant for the MP3/music section are also being syndicated in the blog section – how can I keep this from happening?

    Thanks a bunch!

  18. Posted Sep 9, 2008 at 4:12 pm | Permalink

    Just a quick note since I’ve been toying around with it. The Post title also shows up if you use the recent post widget. If you don’t give a music posts a title, it just displays the post number. Also quick question: Is there a way to limit the number of music posts on the front page? It might be right under my nose, but i can’t figure it out.

    I still haven’t managed to customize it how I’d like, but we’re workin on it!

  19. Posted Sep 10, 2008 at 3:40 pm | Permalink

    @john: At the moment, if you are referring to the RSS feed, the only feed that is singled out is Music post feed. The main blog feed captures everything from all categories. It isn’t set up to have a separate feed for just the blog sans the music category.

    If you’re referring to how the posts are displayed on the home page, you need to make sure that a post only has one(1) category selected. If you categorize a post as a ‘music’ post, and nothing else, it won’t show up in the blog section.

  20. Posted Sep 10, 2008 at 3:51 pm | Permalink

    @Teech: Yeah every post should have the Post Title filled in whether its in the ‘Music’ category or not. I think its best to do something like ‘Artist’s Name – Song Title’ but you could put anything there depending on how you want it archived in WordPress. Leaving the Post Title blank probably isn’t the best idea.

    To change the number of ‘music’ posts on the homepage you need to look for this line of code in either of the home-____.php files:

    < ?php $feature_post = get_posts( 'category=00&numberposts=5' ); ?>

    It should be on line 17.

    The number of posts is determined by:

    numberposts=5

    In this case i’m showing 5 posts, so to change it to 7 posts use:

    numberposts=7

    Pretty easy.

    I apologize for the difficulty in getting it set up. The next version will be a lot easier to get working.

    Thanks for giving Mixtape a go.

  21. Posted Sep 12, 2008 at 3:32 pm | Permalink

    Allan,
    Its not a problem! I think your instructions have been clear and I appreciate your support. The theme is awesome and I don’t plan on doing much in the area or customization; its very clean out of the box. Thanks again for the response.

  22. Posted Sep 15, 2008 at 2:52 pm | Permalink

    Loving the theme!
    Only problem I wanted it to display the 2 column version but ended up getting 1 column, It was late when setting it up so I properly did it the wrong way round anyway! Doesn’t matter I will have to redo it again when I get some time.

    What do I edit to make the Header title bigger? I would like it to nearly fill up the size of the blue box at the top if possible :)

    cheers

  23. Posted Sep 15, 2008 at 5:19 pm | Permalink

    @Stewart: THANKS! Shouldn’t be to hard to switch back to a 2 column layout.

    You’ve got to play around with the CSS of the theme to get the header title bigger. This Tutorial should point you in the right direction.

  24. kevin
    Posted Sep 18, 2008 at 7:09 pm | Permalink

    Ok so those screenshots for instructions on adding the album art are BROKEN and you didn’t even list the instructions for the custom fields, I figured out the small one cannot get the large one, what is the key called??????????????

  25. Posted Sep 18, 2008 at 8:15 pm | Permalink

    @Kevin: Grapup must have deleted the screenshot file from their servers. The screenshot is now hosted on my own server. View it HERE.

    I have also updated that instruction to include the ‘key’ names.

    Thanks.

12 Trackbacks

  • Categories

  • Archives