WPBakery Page Builder is one of the most popular WordPress drag and drop page builders. This tutorial will guide you how to add an audio player with playlist to WPBakery Page Builder.
There are four steps in this tutorial:
- Step 1 - Download and install Wonder Audio Player plugin
- Step 2 - Create an audio player with playlist in Wonder Audio Player
- Step 3 - Add the player shortcode to WPBakery Page Builder
- Step 4 - Save and publish the post or page, test the player in the published post/page.
Step 1 - Download and install Wonder Audio Player plugin
First please install the WordPress premium plugin Wonder Audio Player. You can download the free trial version from the plugin home page, test it, make sure it works for you before upgrading to the commercial version. The trial version has a limit of three audios in one player, the commercial version will remove the limit.
Step 2 - Create an audio player with playlist in Wonder Audio Player
After you have installed the plugin Wonder Audio Player, in your WordPress backend, left menu, go to Wonder Audio Player -> New Audio Player, create a new player.
In the plugin, Step 1 MP3 tab, click the Add Audio button to add your mp3 files.
In Step 2 Skins tab, select a skin that has a playlist.
Save and publish the player, the plugin will create the player and display its shortcode.
Step 3 - Add the player shortcode to WPBakery Page Builder
In WPBakery Page Builder, add a Text Block element.
Edit the Text Block, add the player shortcode.
Step 4 - Save and publish the post or page, test the player in the published post/page.
The shortcode will not work in the page builder editor. To test the player, publish or update the page, then test the player in the final webpage.