WordPress is making terrific updates for the core and version 4.8 brought the great addition of creating a playable sidebar using the new WordPress sidebar audio widget. In this article, we’ll show you how it’s done.
You can either watch the detailed video tutorial below or scroll below that to read the image/text version of the tutorial.
Create A Playable WordPress Sidebar Widget
To create a playable WordPress sidebar using the audio widget, first log into your WordPress admin. Next, hover over to the Appearance menu and click on Widgets.
This method works only in WordPress 4.8 or newer because the audio widget wasn’t available in the earlier versions of WP. If you’ve updated your WP, you’ll see an audio widget option:
Find it by scrolling through the list of available widgets. Drag and drop the one called Audio into the sidebar menu on the right.
Where you see the dashed box outline is where the Audio widget will be placed. In the open widget, click on Add Audio button.
Here, you can upload the audio file you want in your sidebar. As you’ll see in the screenshots below, you’ll have three options. You can:
- Upload the files
- Get them from your Media Library if you uploaded them previously
- Insert the file from an URL
Upload the files or getting them from your media library simply by choosing the appropriate tab and either uploading the file or choosing it form the list.
Inserting a file from URL needs a URL that contains the playable audio file. Most often you’d use a link to a file hosted on Amazon S3 or a similar cloud service.
The best method and the one I’ll be expanding on in this article is inserting from URL because it uses less of your server resources. The fewer server resources you use the faster your site will run.
For the purpose of this tutorial, I’ll add a short audio file from Amazon S3.
To do that, first log into the Amazon S3 console and select an audio file.
When you click on the checkbox beside the file, a menu will appear on the right. It will look like this:
Select the Link and copy it. Do not use the copy path shortcut because it won’t copy the correct link. Go back to your Audio widget page and paste the link inside the box.
Next, click on Add to Widget.
Then click on Save.
Now when you visit your site, you’ll see the Audio widget in the sidebar with an audio player.
If you or your visitors are having problems with playing the audio, check if the permissions on the S3 console are set to visible to Everyone.
Click on the box for “Everyone” and then check the boxes for ‘Read’ on both Object Access and Permissions Access and click on Save.
Creating a Soundcloud Audio Sidebar
If you want to get the audio from Soundcloud, the process is different.
What you’ll need to do is go to the desired soundcloud audio page and copy the embed code. I’ll show you a step by step instruction on how it’s done.
Step 1: Go to your desired Soundcloud audio
Step 2: Click on the ‘share’ button
Step 3: Click on the Embed tab
Step 4: Copy the embed code
Step 5: Drop and drop a Text Widget to the sidebar in your WordPress site
Step 6: Open the widget and paste the embed code from Soundcloud inside it.
Step 7: Save and check the results
If you’ve done everything right and I’m sure you did, go to any page on your WordPress site that has the sidebar and you’ll see a Soundcloud widget on the right-hand side.
An important note is that you must use the Embed code. Soundcloud does provide a link to the audio file, but it’s not a link that you can use in the URL field for the new Audio widget.
It’s pretty easy to add audio files to your WordPress sidebar in version 4.8 and higher by using an audio widget. If you have any questions and comments, leave them below and I’ll try to answer them as soon as possible. Until next time, keep crushing it and I’ll see you in the next tutorial.
For customizing your WordPress site further, make sure you subscribe to my WordPress Tutorials – WPLearningLab channel and click on the bell notification not to miss any of the useful WordPress tutorials.