embed spotify playlist in wordpress

Table of Contents

Table of Contents

Quickly Embed Spotify Playlist in WordPress (2023)

Are you looking for an easy and reliable way to embed Spotify playlist in WordPress? Because Spotify is a great way to share your favorite songs with friends. It’s also an easy way to locate new tunes and find out what’s trending on the service. With Spotify playlists, you can display all of your favorite songs in one place, so people who visit your site will be able to enjoy them as well!

If so, then this article is perfect for you. This blog post will show you how to embed a Spotify playlist in WordPress. The tutorial is broken down into three easy steps: Get the link from the Spotify playlist, embed the playlist with Gutenberg editor, classic editor, and Elementor, embed it in your WordPress widget area.
The following article contains everything you need to know about adding a Spotify playlist in WordPress.

How to Embed Spotify Playlist in WordPress

If you run a music blog or want to share your favorite tunes with your fans, you’ll need to know how to embed a Spotify playlist in WordPress.
Thankfully, it isn’t as complicated as you may think. It’s not difficult to do.
Even a plugin isn’t needed. WordPress comes with an embed feature that allows you to quickly embed Spotify songs. Now I’ll show you how to embed a Spotify playlist in WordPress.

Step 1: Copy the playlist URL from Spotify 

Clearly, To insert Spotify, you’ll need the playlist’s URL. So that’s our first move. To copy the playlist URL, you must first log in to your Spotify account and find the playlist which you want to show on your page.

You can copy the link from Spotify’s web version. Let’s look at how to copy the link from the computer or the web version. Log into your Spotify account and find or make a playlist to show. Click the three-dot button once you’ve found or built the playlist. The share option will be visible. When you hover your mouse over the share option, you’ll see a copy link to the playlist option. This link must be copied.

embed spotify playlist wordpress BoomDevs


If you’re worried about how to get the link from the desktop app then let me tell you that the process will be the same for collecting links from the desktop app. So don’t panic.

Let’s take a look at how to copy playlist link from a mobile app:


Go to the app first, then look for the playlist. Similarly, go to the 3 dot option and then to the share option. The copy link option will appear after you tap on the share. To create the link, select Copy Link.

Group 19715 BoomDevs

Add Spotify playlist to WordPress Post or page with Gutenberg editor 

After copying the link, you’re almost finished with half of the job. You must now include the playlist in your post or page. To do so, create a page or post where the playlist will be added. Then switch to editing mode. The Gutenberg editor is now used by almost all. So first, I’ll show you how to use the Gutenberg editor to add a Spotify playlist.

embed spotify playlist wordpress gutanbarg BoomDevs

Go to edit mode and add a new block where you want to add the Spotify playlist. Now click on the plus icon and Search Spotify.

Screenshot 3 2 BoomDevs

You will see this kind of option, you have to put the link of the playlist that have you copied. Then hit the embed button and see your Spotify playlist is now showing on your page.

Don’t worry about the Hight and width. It will show in normal size in the post preview. Just align it to the Center, So that it will show in the center.

How to add a Spotify playlist with Classic editor:

If you’re using the Classic editor, I recommend switching to the Gutenberg editor because it has more features and is recommended by WordPress.
Anyways, if you’re using the Classic editor, go to the post and select Edit. Select the add media option.

Screenshot 5 3 BoomDevs

Then select insert from the link, paste the link, and then select the insert into post. Your playlist will be embedded successfully.

Screenshot 6 3 BoomDevs

How to Add Spotify Playlist to a Widget in WordPress:

If you want to embed the playlist on the sidebar widgets then go to Appearance >> Widgets then insert a text box to the slider. And paste the code in the text mode. Then save the widgets. Now it will add the playlist in your widgets.

embed spotify playlist wordpress widgets BoomDevs

How to Add Spotify Playlist with Elementor

Elementor is used by a lot of web developers and bloggers for their websites. This is based on the fact that it is a strong WordPress plugin that allows you to make beautiful designs without having to know how to code. It’s also easy to use, with drag-and-drop features and a variety of customization option. If you are a fan of Elementor and love to edit Elementor then follow my step:
Go to your post or page then add a section where you want to embed the playlist. Then get the text editor elements in that section.

embed spotify playlist wordpress with elementor BoomDevs


Paste the link and hit the save.
If you want customization you can Do that with Elementor as well.

Example


Here’s an example. I’m using a garbage editor to make this embed.
To refresh your mind and mood, listen to the playlist.

Here is the Mood Booster playlist

However, since I use custom CSS to build the background shadow on my website, you will note a slight difference. You can also use this CSS.
All you need to do that just copy the CSS code and paste it into your custom CSS option. You can do it by going through the theme customization option than custom CSS/Additional CSS. Paste the CSS code and hit update. When you embed Spotify it will automatically add a background shadow. You can also use a plugin to use custom CSS such as Simple Custom CSS and JS, Simple Custom CSS, Custom CSS, and JavaScript.

.entry-content .wp-block-embed-spotify iframe {
box-shadow: 0px 2px 30px 1px #000;
}

Warping up

In this blog post, we’ve discussed the three different ways you can add a Spotify playlist to your WordPress site. We hope these instructions have helped you out and you can use one of them to successfully include music on your site. If there is anything I missed, please leave me a comment below so I may address it quickly. Thank you for reading about how to add Spotify playlists in WordPress.

So, what’s next? You can read the following articles also :

How to Make WordPress Site Private in 2021

How to Delete WordPress Account In 5 Minutes

Like what you see? Share with a friend.
Shamiul Bishal
BoomDevs’ Head of Content & SEO Analyst. Enjoys writing about the things I’ve experienced. Skilled in SEO, WordPress, HTML, Social Media Optimization, and Content Writing.
BoomDevs

We deliver exceptional custom software development solutions to empower small and medium-sized enterprises with tailored digital solutions.

embed spotify playlist in wordpress

Table of Contents

Table of Contents

Quickly Embed Spotify Playlist in WordPress (2023)

Like what you see? Share with a friend.
Shamiul Bishal
BoomDevs’ Head of Content & SEO Analyst. Enjoys writing about the things I’ve experienced. Skilled in SEO, WordPress, HTML, Social Media Optimization, and Content Writing.
BoomDevs

We deliver exceptional custom software development solutions to empower small and medium-sized enterprises with tailored digital solutions.

We're here to help you with your next project with our experience, & expertise.

Why We Best

Developing Success Over a Decade
0 +
A Strong Team for Superior Solutions
0 +
Partnering for Cutting Edge Innovation
0 +
Proven Success with Projects Delivered
0 +
Lets Talk Now

Transforming Visions Success Stories

We believe in a transparent and collaborative approach to every project we work on. Here’s a peek at our tried-and-tested process for website design

Your Vision, Our Expertise

Get a tailored proposal for your project within 24 hours by filling out this quick form. Share your vision, budget, and contact details to start turning your ideas into reality. Our transparent process ensures collaboration and results you can trust.

Write us a few words about your project and we'll prepare a proposal for you within 24 hours.


Success Message Icon

Thank You

It's great to hear from you. Thanks for taking
part. Your feedback is greatly appreciated.

Let's Craft Success Together

Are you looking for the best development agency for your development project?

Unlock Your Project's Potential with a Free Consultation.