Quran multilanguage Text & Audio WordPress Plugin A to Z Guide

WordPress based plugin Quran multilanguage Text & Audio developed by an individual person named Bahmed Karim is the first ranked plugin on a Quran query on the WordPress plugins directory. It clearly means that the plugin is most popular and the best part is that it has 5 stars reviewed on the official WordPress website. It’s quite better for the admin and noobs to go with this.

Quran multilanguage Text & Audio WordPress Plugin Key Features:

  • Arabic Quran translated into 29 languages
  • Full ajax and responsive
  • Available for free at all
  • Admin Area to customize the display
  • 32 Sheikhs Voices
  • Download Full Quran
  • Widget and page/post support via shortcode [quran]
  • Custom CSS option
  • 5-star reviews
  • Demo Page available

I will try my best to cover this plugin a to z, from install to set up properly.

I am using the install and setup on WordPress 5.2.3 and today when I’m playing with the plugin’s version is 2.3.5, 400+ active installs, works better on more than 3.0.1 version of WordPress.

Let’s start with Install plugin first.
Download/View | Demo

1. Installation of the plugin:

On your WordPress site, go to Plugins > Add New > Search for “Quran multilanguage Text & Audio” > Click on Install > Activate.

Quran multilanguage Text & Audio Installation steps

Installation of Quran multilanguage Text & Audio

2. Finding admin area options:

Now we need to go to the admin area of the plugin, located on the second number of WordPress left navigation menu.

Quran multilanguage Text & Audio WP plugin admin area options

Quran multilanguage Text & Audio WP plugin admin area

3. Enabling and Selecting the free available templates:

You’ll see the first option of 5 available free frames/templates which will be shown as a border on a page where the plugin code is injected. Must keep it enabled if you want to use it.

Quran multilanguage Text & Audio selection and activation of templates

Quran multilanguage Text & Audio Templates

4. Choosing the voice of Sheikhs:

The second option you’ll see there will be the select box of Sheikh names that recite the Quran in their beautiful voice. You can listen to them one by one and choose the one as default you like more.

Choosing the Sheikh in the plugin options

Choosing the Sheikh

5. Choosing the default Language:

You’ll get the option of choosing the default language of the plugin, its actually the text language which will be used as the translation language of the Arabic voiced Qurani voice. So, if you’ll choose the English, when a visitor will be live on your page he will listen to an Arabic Verse with the translation in the text on the page in the English language.

Choose the default language of Quran Plugin WordPress

Choose the default language

6. Choosing Sura text:

There is another option which allows you to change the text on Sura, shown on visitor page like this:

Choosing Sura Text on widget

Choosing Sura Text on the widget

7. Changing the language and reciter text.

There are more options here we get are we can change the text of language and reciter (récitator). The options are helpful especially when you’re getting non-English users so, you can change the text into any local language.

plugin's reciter and language text changing

Reciter and language text changing

8. Customizing styles:

Finally, we have options to customize the display of the data on a webpage. We have the option of changing the colors of title, number, translate, Arabic and also can add custom own developed CSS style. Here are a few changes to the colors I did.

I tried applying a few effects via CSS to Translation, Arabic (Quran) and Sura Name. Here is the guide on how we can make changes to it. Following CSS i applied at the option of — Custom CSS without the tag <style>…</style>

.bloc_name_sura {font-weight: bold;}
.trans { text-decoration: overline; font-weight: bold;
.quran { text-decoration: underline; font-weight: bold; text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2; } &.deepshadow { color: #e0dfdc; background-color: #333; letter-spacing: .1em; text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9); } &.insetshadow { color: #202020; background-color: #2d2d2d; letter-spacing: .1em; text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636; } &.retroshadow { color: #2c2c2c; background-color: #d5d5d5; letter-spacing: .05em; text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2); }

As there are classed used by plugin author, so I must have to use the exact class name to get it applied to that class.

.bloc_name_sura was used to Sura Name.

.trans was used to Translation

.quran was used in Arabic (Quranic words).

You can visit this page to find out more effects to these available texts.

How to find classes to use effects to this plugin.

There 2 easiest ways by doing this, for common browser gets into the page where the plugin is showing data right-click and go into developer mode. Now choose the arrow button and click on the area you wanna apply CSS and it will show you, classes, there.

Getting CSS classes from common browsers

Getting CSS classes ids

The second and easiest way is doing it on Firefox browser, go to the exact lines you wanna change CSS, select it > right-click > View Selection Source > There you go:

view selection source to find css classes on Firefox

Firefox view selection source

We can see that the author has used classes with spaces which are counted as 2 classes used like if in a <p> we use <p class=” my name”> we can use .my and .name as 2 classes and apply 2 CSS to it. But to be easy we’ll use the first one that will work for all.

If there are few issues you get like while installing you can comment below so I’ll personally try to help you out ASAP.

And following is the code that may help you that mostly causes while installing the plugin.

php_value memory_limit 30M
php_value post_max_size 100M
php_value upload_max_filesize 30M

These codes are used to .htaccess available at the WordPress installed root. I got an error on fresh installed WordPress as the size of the plugin is bigger than the default allowed by WordPress.