Most “Urdu WordPress” sites you’ll find in Pakistan today are either broken (Urdu renders as boxes), ugly (wrong font, cramped line-height), or slow (unoptimised Nastaliq font file pushing a 600 KB download on every page load). Building one that’s fast, beautiful, and actually ranks on Google for Urdu queries takes specific decisions that nobody documents in one place.

This post covers exactly what I wire up for Pakistani clients who want their content in Urdu — or bilingual with English. Real code, real gotchas, 2026 tooling.

Four decisions you need to make first

  1. Urdu-only or bilingual? Urdu-only: simpler, faster, smaller audience. Bilingual (English + Urdu): more reach, 2× the maintenance, translation management headache.
  2. Nastaliq or Naskh script? Nastaliq (Jameel Noori, Noto Nastaliq) is the culturally preferred style for body text in Pakistan. Naskh (Noto Sans Arabic) is common in the Gulf, cleaner at small sizes, and much lighter to download.
  3. Domain strategy? .com.pk or .pk helps Urdu SEO. Subdirectories (/ur/) or separate language domain (ur.yoursite.com)? Subdirectories win 9/10 times.
  4. Typing workflow? Will the content writer actually type in Urdu (Phonetic keyboard layout, Google Input Tools) or paste from Word? This affects your editor toolbar choices.

Step 1 — WordPress installation for Urdu

For an Urdu-primary site, install WordPress in Urdu language directly:

  • During installation, choose language اردو (ur)
  • Already installed in English? Go to Settings → General → Site Language → اردو, Save
  • This downloads Urdu translation files for WordPress core, switches admin UI to Urdu, and — importantly — adds dir="rtl" to the frontend <html> tag automatically

For bilingual, keep site language as English and add a translation plugin (covered below).

Step 2 — RTL CSS handling

When site language is Urdu, WordPress expects themes to ship an rtl.css file alongside style.css. If your theme doesn’t have one, layouts will look left-aligned with Urdu characters flowing from right to left — a mess.

Two clean options:

Option A — Generate rtl.css automatically with RTLCSS

npm install -g rtlcss
rtlcss style.css rtl.css

This flips margin-left ↔ margin-right, float: left ↔ float: right, text-align: left ↔ text-align: right, and so on. Ship the generated rtl.css in your theme root. WordPress auto-loads it when language is RTL.

Option B — Use CSS logical properties from day one

Modern and cleaner. Replace directional properties with logical ones that auto-flip based on document direction:

/* Old: */
.card { margin-left: 1rem; padding-right: 2rem; border-left: 3px solid red; }

/* New — works in both LTR and RTL without a second file: */
.card { margin-inline-start: 1rem; padding-inline-end: 2rem; border-inline-start: 3px solid red; }

Browser support is universal in 2026. This is the approach I use on all new builds — one codebase, both directions, no rtl.css maintenance overhead.

Step 3 — Urdu fonts (the biggest performance trap)

The single largest file on most Urdu WordPress sites is the font. A full Jameel Noori Nastaleeq file is ~450 KB. Noto Nastaliq Urdu is ~580 KB. Compare to Inter Latin (~40 KB). This is where most Urdu sites lose their Lighthouse score.

Font choices ranked

FontStyleSizeNotes
Noto Nastaliq UrduNastaliq~580 KBFree, Google Fonts CDN, beautiful. Default recommendation.
Jameel Noori NastaleeqNastaliq~450 KBClassic Pakistani style. Licensing varies — check before using commercially.
Noto Naskh ArabicNaskh~180 KBLighter, cleaner at small sizes. Less “culturally Urdu” feeling.
Mehr Nastaliq WebNastaliq~380 KBOptimised for web, pairs well with English Inter.
GulzarNastaliq~340 KBModern open-source Nastaliq, growing popularity.

Loading the font — performance rules

<!-- In <head> — preconnect + preload the Urdu font -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" type="font/woff2"
      href="https://fonts.gstatic.com/s/notonastaliqurdu/..."
      crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&display=swap"
      rel="stylesheet">

Three things to do, in order of impact:

  1. Self-host the font file — download the woff2 from Google Fonts and serve from your own CDN. Same-origin loads faster in 2026 than cross-origin due to HTTP/2 multiplexing.
  2. Subset to Urdu code points only — full Noto Nastaliq includes Arabic, Persian, Urdu, extended. Strip to U+0600–U+06FF + digits. Takes file from 580 KB to ~230 KB. Use pyftsubset.
  3. Use font-display: swap — prevents invisible text while font loads. Users see system fallback first, then Urdu font swaps in.

The CSS

body {
    font-family: 'Inter', sans-serif;
}

/* Urdu content — target by language attribute OR direction */
:lang(ur),
[dir="rtl"] body,
.urdu {
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
    line-height: 2.2; /* Nastaliq needs 2× the line-height of Latin */
    font-size: 1.1rem; /* Nastaliq reads smaller than Latin at same pt */
}

/* Mixed content paragraph — keep English words in Inter, Urdu in Nastaliq */
.mixed-content {
    font-family: 'Inter', 'Noto Nastaliq Urdu', sans-serif;
}

The key detail: line-height: 2.2. Nastaliq characters trail upward and downward more than Latin — default 1.5 makes lines collide and characters clip. Always test with real Urdu content, never Latin lorem ipsum.

Step 4 — Making it bilingual

If you need both English and Urdu versions of every page, install a translation plugin. The two real choices:

 Polylang (free)WPML (paid)
CostFree (Pro: ~EUR 99/yr)USD 99/yr minimum
SetupSimpleComplex but comprehensive
WooCommerceNeeds free Polylang-WC add-onBuilt-in (requires multilingual CMS tier)
Translation workflowManual in WP adminIntegrations with pro translation services
PerformanceLighterHeavier, adds DB queries
Best forMost Pakistani SMB bilingual sitesEnterprise, 3+ languages, translator teams

For 90% of Pakistani bilingual builds, Polylang (free version) is the right answer. Once it’s installed:

  • Settings → Languages → Add English and Urdu
  • URL modifications → “Language is set from directory name” → gives you site.com/ (en) and site.com/ur/ (urdu)
  • Settings → String Translations → translate theme/plugin strings
  • Add a language switcher to your menu (widget or menu item)

Step 5 — Per-page direction handling

Even on bilingual sites with site language = English, your Urdu pages need dir="rtl" and your English pages need dir="ltr". Polylang doesn’t do this automatically. Drop this in your theme:

add_filter('language_attributes', 'asad_rtl_by_language');

function asad_rtl_by_language($output) {
    if (!function_exists('pll_current_language')) return $output;

    $current = pll_current_language('slug');
    if ($current === 'ur') {
        $output = preg_replace('/dir="ltr"/', 'dir="rtl"', $output);
        if (!str_contains($output, 'dir=')) {
            $output .= ' dir="rtl"';
        }
    }
    return $output;
}

Step 6 — Urdu SEO

Google indexes Urdu content fine — the gotchas are elsewhere:

  • hreflang tags — if bilingual, every page needs <link rel="alternate" hreflang="ur" href="..." /> and <link rel="alternate" hreflang="en" href="..." />. Polylang adds these automatically.
  • Urdu URL slugs — prefer transliterated English slugs over raw Urdu (/kahani, not /کہانی). Urdu URLs work but Arabic encoding breaks when shared in some messaging apps.
  • Keyword research — Google Keyword Planner covers Urdu, but volumes are under-reported. Validate with Google Trends and direct Urdu search. Target common spellings — users type both “فون” and “phone” to search for phones in Pakistan.
  • Mixed-script search queries — 60%+ of “Urdu” searches in Pakistan are actually Roman Urdu (“khana pakana recipes”). Your site should rank for both scripts. Tag Roman Urdu versions of key pages as English-language content.
  • Schema in Urdu — JSON-LD values should be in the page’s language. Don’t mix.

Step 7 — Urdu typing in the Block Editor

Content writers need a workflow that doesn’t involve copy-pasting from Word. Three options:

  • Windows Urdu Phonetic keyboard (free, built into Windows 11 Language settings) — type “k” and get “ک”. Best for touch typists.
  • Google Input Tools extension for Chrome — transliterates Roman Urdu to Urdu script in real time in any text field, including WP editor.
  • CRULP Phonetic — Pakistani NUCES-CRULP layout, popular with legacy writers.

In the Block Editor, for paragraphs that will contain Urdu, select the block → Advanced → Additional CSS class → urdu. This applies the Nastaliq font via the CSS rule above. Easier: create a reusable block pattern with class urdu pre-applied.

The 7 gotchas nobody warns you about

  1. Numbers — Pakistani Urdu uses Western Arabic numerals (1, 2, 3), not Eastern (۱، ۲، ۳). Force font-variant-numeric: lining-nums.
  2. Ligatures breaking — if Urdu looks like separated letters (“ا ر د و” instead of “اردو”), the font isn’t loading or the encoding is wrong. Check DevTools → Network → font request.
  3. Forms — <input> placeholder text inherits the wrong font on some themes. Explicitly set input::placeholder { font-family: ... }.
  4. Comment field line-height — WordPress default is tight. Add #comments textarea { line-height: 2; } or Urdu comments will collide.
  5. Search results — default WordPress search doesn’t normalise Arabic character variants (ي vs ی). Use “Search & Replace” plugin or Relevanssi for Urdu-aware search.
  6. Emoji in bilingual posts — Twemoji and Nastaliq clash in vertical alignment. Add .urdu .emoji { vertical-align: -0.2em; }.
  7. Word-break in long Urdu URLs — Nastaliq doesn’t break on character boundaries like Latin does. Add word-break: break-word; overflow-wrap: anywhere; on .post-content a.

Urdu site performance checklist

  • Subset font to Urdu code points — 580 KB → 230 KB
  • Self-host the font (or use Google Fonts with preconnect)
  • Preload the font file
  • Use font-display: swap
  • Enable server-side Brotli compression for the woff2
  • Set Cache-Control: public, max-age=31536000, immutable for fonts
  • Test with real devices on 3G — Pakistani mobile networks are still slow in many areas

FAQ

Can I use ChatGPT to translate English content to Urdu?

For drafts, yes — GPT-4-class models produce usable Urdu. But always have a native Pakistani Urdu speaker proofread before publishing. The translations often use Indian Urdu register or formal Urdu where casual is expected, which reads off to Pakistani readers and kills trust.

What about right-to-left WooCommerce?

WooCommerce ships decent RTL support in 2026. The pain points are: cart/checkout page layouts from third-party themes, invoice PDFs (need a Nastaliq-compatible PDF library — mPDF with autoFontGroupSize), and payment gateway buttons (JazzCash/Easypaisa images are English-labeled, leave them be).

Does an Urdu site rank on Google.com.pk?

Yes — Google Pakistan indexes Urdu content and ranks it for Urdu queries. Competition is much lower than English, so ranking for “کیک کی ترکیب” is easier than ranking for “cake recipe”. Combine with .pk domain + Google Search Console set to Pakistan for best results.

Can I monetise an Urdu site with AdSense?

Yes, Urdu is fully supported by AdSense. CPMs are lower than English (PKR 20–80 vs PKR 80–200) but content volume is easier to build, so total revenue can match.

What about the “اردو” in admin dashboard — does my developer need Urdu?

If the site language is Urdu, the WP admin displays in Urdu. Many developers don’t read Urdu fluently. Workaround: every WP user can override their personal language in Users → Profile → Language. Set your editors to Urdu and your developer to English — both work against the same site.

Wrap-up

A good Urdu WordPress site isn’t harder to build than an English one — it just uses different knobs. Get the font right, respect Nastaliq’s line-height, use CSS logical properties, and test with real Urdu content. The payoff: an under-served audience, lower keyword competition, and content that feels like it belongs to Pakistan, not translated into it.

I build Urdu and bilingual WordPress sites for Pakistani clients across Lahore, Islamabad, Karachi, and Rawalpindi. A bilingual WordPress site with optimised Nastaliq font, Polylang setup, and Urdu SEO runs PKR 80,000–180,000 on top of base site cost — see the full pricing breakdown for context.

Message me on WhatsApp with your content — English first, Urdu-only, or bilingual — and I’ll quote in 24 hours.