Creating Beautiful & Responsive Audio Playlists In WordPress

Cue, a free and powerful WordPress plugin that provides you ability to use your website as a music website. With this awesome plugin, you can easily create stylish playlists (as many you want, you can host audio files on your website, you can upload new audio files, you can reuse existing files from your media library or add audio from links to other external remote sources and then easily display them anywhere on your website like on widgets, inside your posts and page or by using the shortcode and template tag.

How To Transform WordPress Into A Music Website?

Install and activate Cue plugin. After activation the plugin adds ‘Playlists’ a new post type in left side admin menu.

Creating A New Playlist

Visit your Dashboard -> Playlists -> Add New page, give your playlist a title and upload songs by clicking ‘Add Tracks’ button. After uploading songs you can drag-drop and reorder them.

Click the arrow on the right of each item to reveal more configuration options. Also you can set a featured image for your playlist and for each song. When you’re done, click ‘Publish’ button and copy the shortcode showing up on left below publish metabox.

Finally, place the copied shortcode into a post or page to embed this playlist.

The plugin also provides you a widget (Appearance -> Widgets page) with which you can display playlist on your sidebar and other widgets area simply by placing the widgets and selecting a playlist from the drop down.

This slideshow requires JavaScript.

For more fine-grained control over where the playlist appears, you can use its template tag: <?php cue_playlist( $id ); ?>

Main Features:

  • Reorder tracks with a simple drag and drop interface.
  • Seamlessly integrates with WordPress’ media manager to select audio and images.
  • Completely responsive to work on any device that supports your chosen audio format.
  • Extends the MediaElement.js script bundled with core.

Photo by brewbooks

Photo by Brandon Giesbrecht

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.