Add Prayer Times to WordPress Without a Plugin

You do not need a plugin to show prayer times on a WordPress site. A small JavaScript snippet and one free API call is all it takes, and it works with any theme.

Why Skip the Plugin?

Most WordPress prayer time plugins are old, poorly maintained, or load a lot of extra code you do not need. Adding your own snippet keeps things simple. You control the HTML, the styling, and exactly which prayers are shown. There are no plugin update headaches and no extra database tables.

The approach here uses UmmahAPI's prayer times endpoint, which is free and returns Fajr, Sunrise, Dhuhr, Asr, Maghrib, and Isha for any location in the world. You pass a latitude and longitude, and you get the times back as plain JSON.

How the API Works

The endpoint is simple. You make a GET request with a latitude and longitude. Here is an example for Makkah:

https://ummahapi.com/api/prayer-times?lat=21.42&lng=39.82

The response looks like this:

{
  "Fajr": "05:12",
  "Sunrise": "06:33",
  "Dhuhr": "12:19",
  "Asr": "15:42",
  "Maghrib": "18:04",
  "Isha": "19:34"
}

To find the coordinates for your city, search for it on latlong.net or any mapping service. Copy the latitude and longitude and drop them into the URL above.

The Basic Snippet

This is the core code. It fetches today's prayer times and writes them into a container element on your page. You can paste this into a Custom HTML block in the WordPress editor.

<!-- Prayer times container -->
<div id="prayer-times">Loading prayer times...</div>

<script>
  (async function () {
    const lat = 51.5074;  // London
    const lng = -0.1278;

    const url = `https://ummahapi.com/api/prayer-times?lat=${lat}&lng=${lng}`;

    const res = await fetch(url);
    const data = await res.json();

    const prayers = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];

    const rows = prayers.map(p => `
      <tr>
        <td>${p}</td>
        <td>${data[p]}</td>
      </tr>
    `).join('');

    document.getElementById('prayer-times').innerHTML = `
      <table>
        <thead><tr><th>Prayer</th><th>Time</th></tr></thead>
        <tbody>${rows}</tbody>
      </table>
    `;
  })();
</script>

Paste that block into a Custom HTML block in the WordPress editor. Change lat and lng to the coordinates of your city. Save, and you are done.

A Styled Version

The plain table above works, but here is a version with a bit more styling and AM/PM conversion built in. It also shows the current date so visitors know the times are for today.

<style>
  .pt-wrap {
    font-family: inherit;
    max-width: 360px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
  }
  .pt-header {
    background: #1a6b3a;
    color: #fff;
    padding: 12px 16px;
    font-weight: 600;
  }
  .pt-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
  }
  .pt-row:last-child { border-bottom: none; }
  .pt-label { color: #374151; }
  .pt-time { font-weight: 600; color: #1a6b3a; }
</style>

<div id="pt-widget" class="pt-wrap">
  <div class="pt-header">Prayer Times</div>
  <p style="padding:10px 16px;margin:0;color:#6b7280;font-size:0.85rem"
     id="pt-date"></p>
  <div id="pt-rows">Loading...</div>
</div>

<script>
  function to12(time24) {
    const [h, m] = time24.split(':').map(Number);
    const suffix = h >= 12 ? 'PM' : 'AM';
    const hour = h % 12 || 12;
    return `${hour}:${String(m).padStart(2,'0')} ${suffix}`;
  }

  (async function () {
    const lat = 51.5074;
    const lng = -0.1278;

    document.getElementById('pt-date').textContent =
      new Date().toLocaleDateString('en-GB', {
        weekday: 'long', day: 'numeric',
        month: 'long', year: 'numeric'
      });

    const res = await fetch(
      `https://ummahapi.com/api/prayer-times?lat=${lat}&lng=${lng}`
    );
    const data = await res.json();

    const prayers = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];

    document.getElementById('pt-rows').innerHTML = prayers.map(p => `
      <div class="pt-row">
        <span class="pt-label">${p}</span>
        <span class="pt-time">${to12(data[p])}</span>
      </div>
    `).join('');
  })();
</script>

Turn It Into a WordPress Shortcode

If you want to reuse this on multiple pages, the cleanest approach is to register a shortcode in your theme's functions.php file. You can then type [prayer_times] anywhere in your content.

Open your theme's functions.php file. You can find it in the WordPress admin under Appearance, then Theme File Editor. Add this to the bottom:

function ummah_prayer_times_shortcode($atts) {
  $atts = shortcode_atts([
    'lat' => '51.5074',
    'lng' => '-0.1278',
  ], $atts);

  $lat = esc_attr($atts['lat']);
  $lng = esc_attr($atts['lng']);

  return '<div id="pt-widget">Loading prayer times...</div>
  <script>
  (async function() {
    const res = await fetch(
      "https://ummahapi.com/api/prayer-times?lat=' . $lat . '&lng=' . $lng . '"
    );
    const data = await res.json();
    const prayers = ["Fajr","Sunrise","Dhuhr","Asr","Maghrib","Isha"];
    function to12(t) {
      const [h,m] = t.split(":").map(Number);
      const s = h >= 12 ? "PM" : "AM";
      return (h % 12 || 12) + ":" + String(m).padStart(2,"0") + " " + s;
    }
    document.getElementById("pt-widget").innerHTML =
      "<table><tr><th>Prayer</th><th>Time</th></tr>" +
      prayers.map(p => "<tr><td>" + p + "</td><td>" + to12(data[p]) + "</td></tr>").join("") +
      "</table>";
  })();
  </script>';
}
add_shortcode('prayer_times', 'ummah_prayer_times_shortcode');

Once saved, you can use the shortcode like this in any post or page:

[prayer_times lat="40.7128" lng="-74.0060"]

That example uses New York City coordinates. Swap in any city's lat and lng values.

Get the User's Location Automatically

If your site serves visitors from many cities, you can ask the browser for the user's location with the Geolocation API. The prayer times will then be calculated for wherever the visitor actually is.

<div id="pt-auto">Detecting location...</div>

<script>
  (function () {
    if (!navigator.geolocation) {
      document.getElementById('pt-auto').textContent =
        'Geolocation not supported.';
      return;
    }

    navigator.geolocation.getCurrentPosition(async function (pos) {
      const lat = pos.coords.latitude;
      const lng = pos.coords.longitude;

      const res = await fetch(
        `https://ummahapi.com/api/prayer-times?lat=${lat}&lng=${lng}`
      );
      const data = await res.json();

      const prayers = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];

      document.getElementById('pt-auto').innerHTML =
        '<strong>Your Prayer Times</strong><br>' +
        prayers.map(p => `${p}: ${data[p]}`).join('<br>');

    }, function () {
      document.getElementById('pt-auto').textContent =
        'Could not get location. Please allow location access.';
    });
  })();
</script>

The browser will show a permission prompt the first time. If the visitor declines, the fallback message is shown. You can replace that fallback with hardcoded times for a default city.

Show a Full Month of Times

The API can also return a full month of prayer times in one request. This is useful if you want to show a timetable visitors can download or print. Add month and year as query parameters:

https://ummahapi.com/api/prayer-times?lat=51.5074&lng=-0.1278&month=10&year=2026

The response is an array of objects, one per day. Each object has the same fields as the daily response. You can loop over the array to build a full timetable table. Check the API docs for the exact structure of the monthly response.

Free API Key for Higher Limits

The API works without a key, but you are limited to 5,000 requests per 15 minutes. For a busy site, that is plenty. If you need more, register for a free key. There is no cost. Pass the key as a header or query parameter as described in the docs.

If you would rather not write any code at all, UmmahAPI's embeddable widgets let you copy a single line of HTML to show prayer times. But the code approach gives you full control over the design.

FAQ

Can I add prayer times to WordPress without installing a plugin?

Yes. A Custom HTML block in the WordPress editor is all you need. Paste the JavaScript snippet from this post, set your coordinates, and save. No plugin installation is required.

How does UmmahAPI know the correct prayer times for my city?

You pass a latitude and longitude to the /api/prayer-times endpoint. UmmahAPI calculates the times based on those coordinates. You can get coordinates for any city from a service like latlong.net.

Do I need an API key to use UmmahAPI prayer times?

No key is needed to start. The free tier handles 5,000 requests per 15 minutes without a key. Registering for a free key removes that rate limit entirely.

Which WordPress blocks or templates can I use to display prayer times?

The Custom HTML block works in any theme, including block themes and classic themes. You can also add a shortcode to functions.php as shown above, which lets you drop the times into any post, page, or widget area with a single line.