How I built a bilingual prayer-times site for Riyadh (WordPress + Umm al-Qura API)

A friend in Riyadh once told me he kept three different apps on his phone just to double-check prayer times. Every app showed slightly different numbers, and nobody could explain why. That conversation became a side project: a single, trustworthy, bilingual website for Riyadh prayer times. The result is now live, and the build taught me a lot about astronomy math, Arabic typography, and pragmatic WordPress development. Here is the full story.

The problem: prayer-time math is not one-size-fits-all

Most people assume prayer times are simple lookup tables. They are not — they are astronomical calculations derived from the sun's position relative to a specific location. Fajr and Isha in particular depend on how far the sun dips below the horizon (the "twilight angle"), and different organizations use different angles:

• Muslim World League: 18° for both Fajr and Isha
• ISNA (North America): 15° for both
• Egyptian General Authority: 19.5° / 17.5°
• Umm al-Qura (Saudi Arabia): 18.5° for Fajr, and a fixed 90-minute interval after Maghrib for Isha (120 minutes during Ramadan)

These small differences in angle translate into 10–20 minute differences on the clock. That is why my friend's three apps disagreed — they were silently using three different calculation methods. Picking the right method for the audience is the single most important decision in a prayer-times product, and everything else follows from it.

Why Umm al-Qura is the standard for Saudi Arabia

The Umm al-Qura calendar, issued by Umm al-Qura University in Mecca, is the official calculation method used across the Kingdom of Saudi Arabia. Mosques, newspapers, and government announcements in Riyadh all follow it. For a site serving Riyadh, using the Muslim World League or any other method would not just be slightly off — it would be visibly wrong compared to every mosque loudspeaker in the city.

One quirk worth knowing: Umm al-Qura computes Isha differently from most methods. Instead of a twilight angle, it uses a fixed time interval after Maghrib — 90 minutes on ordinary days, 120 minutes during Ramadan. If you hard-code an angle for Isha, your Saudi timetable will be wrong year-round. Getting this detail right was non-negotiable for the site's credibility.

The stack: WordPress plus a small custom layer

I chose WordPress as the foundation, for boring and practical reasons: mature SEO tooling, a real content editor for the bilingual articles we planned, and cheap, reliable hosting. But WordPress alone does not compute prayer times, so I added a small custom layer:

1. Data source: The site's daily times come from a scheduled job that calls the Aladhan API with the Umm al-Qura method parameter for Riyadh's coordinates (24.7136° N, 46.6753° E). The response is cached as transients and stored as structured meta, so the site never hits the API on a page view.
2. Cross-checking: Automated checks compare the fetched times against a second independent implementation of the Umm al-Qura rules. If Fajr or Isha ever drift by more than a couple of minutes, I get an alert before visitors see anything wrong.
3. Presentation: A lightweight custom theme block renders the day's timetable, the Hijri date, and a "next prayer" countdown. No page builder, no 2 MB slider plugin — just server-rendered HTML.

Keeping the custom code small was deliberate. Prayer-time logic is the kind of thing that rots quietly if it is buried inside a giant theme; isolating it in one plugin made the cross-checks and caching easy to reason about.

Bilingual challenges: RTL Arabic and text shaping

Half the audience reads Arabic, half reads English, and both halves deserve a first-class experience. Two problems were harder than expected:

RTL layout. Arabic pages use dir="rtl", and I learned to stop writing margin-left / margin-right and use CSS logical properties (margin-inline-start, padding-inline-end) everywhere instead. Iconography that implies direction — arrows, progress indicators, the prayer timeline — has to be mirrored, not just translated. The timetable table itself reads right-to-left in Arabic, which changes column order, not just text alignment.

Arabic text shaping in share images. We auto-generate Open Graph images for each day's timetable. The first version rendered Arabic with disconnected letters — each glyph drawn in its isolated form — because the image renderer had no complex-text-layout engine. Arabic script requires contextual shaping (letters join depending on neighbors) plus proper right-to-left ordering. The fix was switching the rendering pipeline to a text stack with real shaping support, and then visually reviewing a sample of generated images in both languages before shipping.

A smaller detail: numerals. Some Arabic-speaking visitors expect Eastern Arabic numerals (٠١٢٣٤٥٦٧٨٩), others are used to Western digits. We made it a toggle rather than guessing.

SEO and performance notes

• Precompute, don't calculate. Every day's timetable is generated once and served as static cached HTML. A month view is a single query against stored data, not 30 API calls.
• One URL per language. The English edition lives at /en/ and the Arabic edition at the root, each with proper hreflang annotations so search engines do not treat them as duplicates.
• Structured data and sitemaps. Separate sitemaps per language and schema markup for the daily schedule help the pages show up as rich results.
• Core Web Vitals. Server-rendered HTML, system font stacks with an Arabic-capable fallback, lazy-loaded images, and no render-blocking JavaScript kept Largest Contentful Paint comfortably in the green on mid-range phones — which is what most of the audience actually uses.

The finished product

After about six weeks of evenings, the site was doing exactly what I had promised my friend: one page, the right times, in the language he reads. You can see the finished result on the live site — the English edition, with the Arabic edition one click away.

The biggest lesson was not technical. Accuracy is the product here: a beautiful timetable computed with the wrong method is worse than an ugly one computed with the right method. Choosing Umm al-Qura, verifying it with cross-checks, and presenting it bilingually is what makes the site worth using — the WordPress plumbing is just how it got shipped.