How to Embed Spotify Playlist in WordPress [Quick Tutorial]

Are you wondering how to embed Spotify playlist in WordPress posts or pages? Well, you’re in the right place.

Spotify is a popular music streaming website. You can use it to create your own playlist and even share the playlist with your friends and followers.

Can you embed Spotify playlist in WordPress? Yes, you can.

In this step-by-step tutorial, I’ll show how you can add a Spotify playlist to your WordPress posts or pages without any hassle. So let’s dive in.

How to Embed Spotify Playlist in WordPress

Whether you’re running an online radio station, managing a music blog, or planning to start a podcast, you may want to add your Spotify playlist to your WordPress site.

The good news is you don’t have to install any plugin to add your playlist to your website. WordPress comes with a Spotify block that allows you to embed Spotify songs or playlists easily.

Let me show you how to do that in 2 easy steps:

First, you need to grab the Spotify playlist link that you want to embed to your post or page. If you already have the link, then you may skip this part.

Now, depending on how you use Spotify, you can follow the steps mentioned below to copy the playlist link:

#1. Web App or Desktop App

If you use the Spotify web app or website, then you should first open the web app player on your web browser.

Next, you need to click on Your Library from the left panel.

Spotify web app playlist

Now click on the Playlists tab and then open the playlist that you want to embed on your WordPress page.

Once you open the playlist, you should click on the three-dot icon, present just below the playlist cover image. This will open a menu where you need to hover your mouse cursor over the Share option and then click on Copy link to playlist.

Spotify web app copy playlist link

This will copy the link to your playlist which you can use on Step 2.

What about the Desktop App? Well, it is pretty similar to the web app.

You just need to open the Spotify Desktop App on your computer and then follow the above instructions to get the playlist link.

#2. Mobile App

First of all, open the Spotify app on your mobile phone and then click on Your Library, present at the bottom of your screen.

Next, you need to open the playlist of your choice.

Copy Playlist link Spotify mobile app

Once done, you should click on the three-dot icon, present at the top-right corner of your screen. This will open a menu where you need to click on Share.

Now you can use the Copy Link option to get the playlist link.

Spotify mobile copy link option

Step 2: Add Spotify Playlist to WordPress Post/Page

Let me now show you how to embed your Spotify playlist to a WordPress page. You can follow the same method for embedding playlists in your posts.

First, you need to open the page where you want to embed the playlist or you may create a new page.

Let me create a new page by clicking on Pages -> Add New from the left sidebar of the admin panel.

On this new page, you need to add the Spotify block. To do that, click on the + icon, present at the top-left corner of your screen, to add a new block.

add spotify block to WordPress page

Here you need to search Spotify using the search box. Once you find it, you should click on it to add the block to your page.

Now you need to paste the URL of your Spotify playlist into the textbox and click on Embed. This will add the playlist to your page. Simple, isn’t it?

embed spotify playlist in WordPress block

There is an alternative (faster) way to add the Spotify block to your page. Just type /Spotify in a new paragraph and click on the Spotify block to add it.

add block shortcut

How to Add Spotify Playlist to the Classic Editor

Are you using the Classic Editor instead of the Gutenberg or Block editor? Don’t worry, you can easily embed your Spotify playlist in the Classic Editor.

First, open the page where you want to embed your playlist. Next, you need to paste the playlist link to a new line.

add spotify playlist to classic editor

WordPress will now automatically convert the link to an embedded Spotify player. As simple as that!

Alternatively, you can also embed the Spotify player using the Add Media option.

First, you need to click on the Add Media button, present above the editor, to open the “Add Media” modal box. Next, you should click on the Insert from URL option, present on the left side of the modal box.

use insert from url option

Finally, paste the playlist URL into the textbox and click on Insert into page. This will add the Spotify playlist to the Classic Editor.

How to Style the Spotify Playlist in WordPress

One of the problems that most people face is they can’t control the width or height of the embedded Spotify player.

Don’t worry! You can use a bit of CSS code to style your playlist. Let me show you how to do it.

Important: Before you proceed, it is highly recommended to take a backup of your site. You may use the UpdraftPlus plugin for this purpose.

To style your Spotify player, you need to first get the ID of the page or post where you want to embed your playlist.

The best way to find the post or page ID is to open the editor of the page/post and then check the address bar of your browser. The ID of the page is in between the “post=” and “&action=edit” in the URL.

check address bar of browser to get page id

In the above example, the ID of the page is 87. You may follow my tutorial on how to find the ID of any page or post for detailed instructions.

Once you have the page ID, you need to open the Theme Customizer (Appearance -> Customize) from the left sidebar of the admin panel.

Next, you should click on the Additional CSS option from the left panel of the Customizer. Here you need to paste the following CSS code:

.post-XXXX iframe { width:100%; height:400px; }

In the above code, you just need to replace XXXX with the ID of your page. For example, if the ID of the page is 87, then the CSS code will be

.post-87 iframe { width:100%; height:400px; }

add css code to increase playlist width

Once done, click on Publish to save the changes.

The above code will increase the width of the player to 100%. Also, it’ll set its height to 400px. If you know a bit of CSS, then you can play with the above code or even add some styling based on your needs.

How to Add Spotify Playlist to a Widget in WordPress

Want to embed Spotify playlist to your WordPress widget? Let me show you how to do it.

First, you need to head over to Appearance -> Widgets from the left sidebar of your admin panel. This will open the Widgets page where you’ll see all your existing widgets.

Now add a Text widget to the Widget area of your choice.

add text widget

Let me drag and drop the Text widget to the Sidebar area of my website. (Widget area will depend on the theme you’re using.)

Now paste the playlist link to the Text widget and WordPress will automatically convert it to the Spotify player. Finally, click on Save to save the changes.

add spotify playlist to text widget

Alternatively, you can click on the Add Media button and use the Insert from URL option to add the playlist to the Text widget.

There can be times when your Spotify playlist will not be embedded properly. You’ll most likely face this problem if you’re using the Classic Editor.

Here are the most common reasons why your Spotify link embed is not working:

#1. Whitespace or text present before or after the link: Make sure there is no whitespace before or after the Spotify link. This will prevent WordPress from embedding the playlist.

#2. The URL is hyperlinked: Is the Spotify playlist link hyperlinked? Make sure you remove the hyperlink, otherwise, WordPress will not be able to embed the playlist.

The best way to avoid the above problem is to click on the Add Media button and use the Insert from URL option to embed your playlist (follow the instructions in the Add Playlist to Classic Editor section).

Final Thoughts

In this quick tutorial, you learned how to embed Spotify playlist in WordPress and that too without the help of any plugin.

In case you face any problem, please feel free to comment below and I’ll be more than happy to help you.

Sandipan Mukherjee
Sandipan Mukherjee is the owner of WPHour. He is also a Web Developer and a freelance writer for hire.

Leave a Comment

Disclosure: Some of the links in this article are affiliate links. It means that if you click on those links and purchase an item, we may receive a commission. However, it won’t cost you anything extra.