How to create a RTL layout WordPress Audio Player

Last updated on

This tutorial will guide you how to create a RTL layout WordPress audio player by using the plugin Wonder Audio Player.

There are two steps in this tutorial:

  • Step 1 - Create an audio player with Wonder Audio Player plugin
  • Step 2 - Add custom CSS code to change the layout to RTL

A created demo is as follows:

00:00 / 05:28
  • 1
    05:28
    Chapter 1 - Pride and Prejudice
  • 2
    04:56
    Chapter 2 - Pride and Prejudice
  • 3
    09:46
    Chapter 3 - Pride and Prejudice
  • 4
    06:10
    Chapter 4 - Pride and Prejudice
  • 5
    05:44
    Chapter 5 - Pride and Prejudice

Step 1 - Create an audio player with Wonder Audio Player plugin

You can view the following document for how to create an audio player: Wonder Audio Player Help Document. You will also find tutorials of how to add the audio player to WordPress page builders or editors, for example, WordPress Classic Editor, WordPress Block Editor, WPBakery Page Builder, Elementor, Divi Builder, SiteOrigin Page Builder, Beaver Builder etc.

You can also view the quick start YouTube video: How to create a WordPress audio player.

Step 2 - Add custom CSS code to change the layout to RTL

In the demo of this tutorial, we have selected the player skin "Bar with Playlist". To change the layout of the player to RTL, you can add the following CSS code to the step 3 Options tab, Advanced Options, Custom CSS input box:

#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-playpause,
#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-prev,
#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-next,
#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-loop {
  float: right !important;
}
 
#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-time,
#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-volume {
  float: left !important;
}
 
#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-item-id {
  float: right !important;
  margin-right: 0 !important;
  margin-left: 8px !important;
}
 
#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-item-title {
  float: right !important;
  direction: rtl !important;
}
 
#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-item-info {
  float: left !important;
}