How to put a Spotify playlist on WordPress

Add a Spotify playlist to WordPress and customize it

The question of whether Spotify is good or bad for musicians is the topic of another conversation. Spotify is used by millions of people and looks like it’s here to stay despite recent lawsuits. If you have your music on Spotify or you have a playlist that you’d like to share with your fans or friends then read on and learn how to embed a Spotify playlist on WordPress.

There are quite a few plugins out there that will perform some of the tasks that I’m about to show you but I always choose a bit of manual coding over a plugin in most cases. Plugins can add a bit of overhead to your site. If you’ve worked in a DAW you’ll understand what overhead is. Processing power and bandwidth are things we want to save and not squander. If you spend a bit of time to improve the loading time of our site you will benefit from the results in the long run.

First things first, check your WordPress theme. You want a good solid theme to allow integration of plugins and external javascript that may add a bit of load to the download times. This website uses the StudioPress Genesis theme.

Here’s something to think about if you’re doubting that an increase in speed will make any difference to your business. Kissmetrics posted statistics that claim that ‘If an e-commerce site is making $100,000 per day, a 1-second page delay could potentially cost you $2.5 million in lost sales every year'.
Keep it simple. Now back to the task.

Getting the playlist URL

Spotify’s developer pages don’t explain the steps to embed a playlist in WordPress properly so pay attention folks!

1. Open up your Spotify App on a desktop computer.
2. Find your playlist, right-click it (from the sidebar) and select Copy Embed Code.

If you have the playlist open in the main pane you can click the circle with the three dots just beside the green Play button and select Copy Embed Code here also.

3. Open your WordPress Admin.
4. If you plan to put the playlist in the sidebar then click on Appearance > Widgets
5. Choose a text widget from the options on the left and send it to the sidebar, footer, or area you’d like the playlist to appear.

6. The text widget will appear in its new location and you can now paste the Spotify embed code in the Content: area. There’s no need to put a title as that’s entirely optional.
7. Click Save and check your results on the live page.

Adding custom styling

You’ll notice that the Spotify playlist is a fixed height and that might not be the perfect situation. Maybe you want 20 or 30 songs in your playlist to display. We can fix that with some styling of the HTML.
Now, I know I said we weren’t going to install any plugins but there is one plugin I’d recommend to help you customise the Spotify playlist. I’d recommend this plugin for any WordPress installation that needs some customization. It’s called Simple Custom CSS and allows you to customise your WordPress theme through the CSS (or styling).
First of all, check to see if your theme already has a custom CSS option. Some themes include a section in the options area for adding custom CSS. If you already have this then there’s no need to install the plugin.
For those without any custom editing features go to Plugins in the WordPress admin. Click Add New. In the search field at the top right of the plugins page type Simple Custom CSS. Click install and activate.
This will add a Custom CSS menu option under the Appearance menu.
This is where the magic happens.
Click on Custom CSS and the Simple Custom CSS editor will open.
Paste this code into the text area and click Update Custom CSS

iframe {
height: 800px;
width:100%;
}

This code will change the iframe attributes to make the playlist 800px tall. You can change this value to whatever you want.
And there you have it. An embedded Spotify playlist in your blog with custom height.

Make sure that the width of the widget space on your WordPress theme is wide enough to allow the full version of the playlist. I’ve found that if I try to put the playlist in a very narrow sidebar then a compact version of the Spotify player appears and it’s not possible through customization to change this.