Complete Quran Site Code developed with GlobalQuran api in javascript. you can use it anywhere, on desktop or just upload on any site with your own layouts.
Pull request Compare This branch is 49 commits behind GlobalQuran:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

README.rdoc - Code + API

بسم الله الرحمن الرحيم - In the name of Allah, Most Gracious, Most Merciful

This Repository have all the scripts to get you started for your Quran Project for your website or for any device that uses html/javascript structure.

we will be adding more scripts to help you build your own Quran project.

Quick Links

  • Features List - Complete list of features

  • Online Demo - Live Online Demo

  • Forum - Talk to us about Ideas, Questions or Suggestions

  • Blog - Get to know what's new coming or has been came.

  • About us - About the project and people who are behind it.

  • Documentation & Tutorials - Learn about code and also use our Quran data through REST API.


Getting to know about folder structure

auto-html [Recommanded]

This will pull html/javascript/css and push directly from your site to users. if any updates took place on the code, you will always be up to date.

dynamic-html [Live (we use this)]

you can modify complete layout through html/css/javascript. full control for any kind of developers.

static-html [Testing]

if you plan to change css only, then you can use this for testing only. complete javascript code is not included in this.

PSD-html [Designer]

if you are designer and want to change/create site/icons.


Helps you extend the features of your site. developers are welcome to add there own plugins here.

Let's Install - Three different methods to install from.


if you are installing this in wordpress, then try our easy to add wordpress plugin.

1. auto-html - if you choose to use this.

  1. edit index.php and change following settings:

    $api_url = ''; - pointing to main site. 
    $api_key = ''; - put your api key from .... (coming soon)
  2. save the file.

  3. upload directly where you want to host it (ex: www). you can even change the file name from index.php to any name (ex: quran.php).


if you want to change css for this dynamically fetching html, then you have to edit index.php, once it gets the html from site, then just find global.css and replace it with your own.

2. dynamic-html - if you choose to use this.

  1. edit index.html (optional)

  2. save the file.

  3. upload the dynamic-html directory to any directory you wish to use it at (ex: www or www/quran)


you can edit any file in it and check it with online preview. - you can test it on local-server as well.

3. static-html - use this for css testing only. for creating new css or modifying old one.

if you are creating new css layout called fancyDesign, then create new sub-folder at images/themes/fancyDesign and put all your css files and images in this folder, following is recommended settings for this folder.

  • fancyDesign/ - images/css files and folders here.

  • fancyDesign/css - all the css files here

  • fancyDesign/css/global.css - complete css

  • fancyDesign/css/print.css - printing version


once you download this folder, you can test it without even putting on server.


Plugins are great way to extend the site features. we welcome all the developers to add there own plugins here and so people can use it for there sites/applications. if you know any muslim developer, then feel free to share this area with them, so they can add there own plugins here.


Need Help? or just want to suggest something! Go to our Forum area and search our forum for Q&A or just Ask one.


Basit <> - Please use Forum area to ask for support.

Thanks to

Everyone in this list.


See the CHANGELOG.rdoc file for details.


Copyright © 2006-2012 is free software released under the Simple Public License (Simple-2.0).