How to add a WordPress audio player with playlist to Divi theme

Last updated on

This tutorial will guide you how to add a WordPress audio player with playlist to Divi page builder of Elegant Themes.

There are 3 steps in the tutorial:

  • Step 1 - Install Wonder Audio Player
  • Step 2 - Create a WordPress audio player with playlist
  • Step 3 - Add the WordPress audio player to Divi page builder

Step 1 - Install Wonder Audio Player

First please install the WordPress premium plugin Wonder Audio Player. You can download the free version from the plugin home page, test it, make sure it works for you before upgrading to the commercial version.

Step 2 - Create a WordPress audio player with playlist

After you have installed the plugin Wonder Audio Player, in your WordPress backend, left menu, goto Wonder Audio Player -> New Audio Player, create a new player.

In the plugin, step 1, click the Add Audio button, in the Add Audio dialog, select or upload an mp3 file from Media Library. You can also select a cover image for the audio and enter title, album and artist information.

wordpress add audio

In the plugin, step 2, Skins tab, select a skin that has a playlist.

wordpress audio player with playlist

Click the Save & Publish button, the plugin will create the player and display its shortcode.

Step 3 - Add the WordPress audio player to Divi page builder

To add the created WordPress audio player to Divi theme, in the page editor, add a Code module.

divi code module

In the Code Settings dialog, add the audio player shortcode to the Content input box.

divi audio player shortcode