WP Manifestindependent plugin directory
manifest / content / muslim-prayer-bar

Muslim Prayer Bar

WP Plugin for masjid website to show prayer bar anywhere using shortcode

by Muslim Prayer Bar Contributors · github.com/abulkhaera/muslim-prayer-bar

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/abulkhaera/muslim-prayer-bar/archive/refs/heads/main.zip
Readme github.com/abulkhaera/muslim-prayer-bar ↗

A lightweight WordPress plugin that adds a header bar showing live prayer times and the Hijri date to any page or post.

What it does

Muslim Prayer Bar renders a compact, theme-matching bar with:

  • The five daily prayers (Fajr, Dhuhr, Asr, Maghrib, Isha) plus Sunrise, each with a live countdown to the next one
  • Today's Hijri date alongside the Gregorian date
  • An optional rotating line of short Qur'anic phrases beneath the times
  • Automatic highlighting of the closest, next, or current prayer (your choice)

It ships pre-configured for Singapore, sourcing prayer times in this order:

  1. Official MUIS timetable (CSV upload) — authoritative, exact published times
  2. Aladhan API (method 11, MUIS Singapore) — computed fallback, cached 6 hours
  3. Static built-in fallback — last resort, clearly flagged in the UI as unverified

Add it anywhere with a shortcode: [prayer_bar]

Installation

  1. Download or clone this repository.
  2. Zip the muslim-prayer-bar folder (or use the release zip if you build one).
  3. In WordPress: Plugins → Add New → Upload Plugin, and upload the zip.
  4. Activate the plugin.
  5. Go to Settings → Prayer Bar to configure your timetable CSV, coordinates, theme, and display options.
  6. Add [prayer_bar] to a header template, page, post, or widget area. In Elementor, use a Shortcode widget.

Shortcode options

[prayer_bar theme="light" compact="1" countdown="both" highlight="closest" density="compact"]
Attribute Values Default
theme dark, light dark
countdown both, mobile, desktop, none both
highlight closest, next, current closest
density comfortable, compact, tight compact
pattern 0, 1 0
ayah_mobile 0, 1 0

Unspecified attributes fall back to whatever is set on the Settings → Prayer Bar admin page.

REST endpoint

GET /wp-json/mpb/v1/prayer-times

Returns today's prayer times, Hijri date, and highlight state as JSON — useful for building a custom front end or a mobile app view.

Styling

The bar has no background of its own; it inherits whatever section/header it's placed in. Every spacing and font size is a CSS custom property (--apb-*), so you can override sizing (especially for mobile) from Appearance → Customize → Additional CSS without touching plugin files. See the settings page for a ready-made snippet.

Adapting to another region

This plugin was built around Singapore's MUIS timetable format and the Asia/Singapore timezone. To adapt it elsewhere:

  • Change the TZ, LAT, and LNG constants in includes/class-prayer-times.php
  • Update column_map() in the same file if your local timetable CSV uses different column headers
  • Optionally change the Aladhan API method parameter to the calculation method used by your local authority

Requirements

  • WordPress 6.0+
  • PHP 7.4+

License

GPLv2 or later — see LICENSE.

Contributing

Issues and pull requests are welcome. Please keep changes backward-compatible with existing shortcode attributes and settings where possible.