A clean, Google-style search widget for WordPress that works in any language — type or speak, and results appear instantly.
Lightweight, fast, and dependency-free. Works straight out of the box on any WordPress site.
Results appear as you type. Searches post titles using a smart scoring engine — exact matches rank first, followed by partial matches and individual word hits.
Google-style colored microphone button. Shows live interim text while you speak, then fires the search on the final transcript. Works with any BCP-47 language code.
Text search is Unicode-aware — it matches Arabic, English, French, Chinese, Hebrew, Persian, Japanese, or any other script without extra configuration.
One setting switches the entire widget between right-to-left and left-to-right. Input, results, and layout all adapt automatically.
Posts are fetched once on page load via the WordPress REST API and stored in memory. Every subsequent search is instant — no extra network calls.
Pill-shaped bar, subtle shadows, smooth transitions, skeleton loader, staggered result animations — all without a single external library.
Adapts perfectly to all screen sizes — desktop, tablet, and mobile. Touch-friendly buttons at every breakpoint.
The only thing you ever change: your site URL, voice language, text direction, placeholder text, and maximum results.
When the page opens, the widget quietly calls the WordPress REST API and caches all post titles and links in memory.
For text: results appear after 2 characters with a 200ms debounce. For voice: click the mic, speak, and the transcript fills the input automatically.
Each post is scored — exact title match 100, partial match 60, individual words +15. Top results are shown with matched words highlighted.
Each result card links directly to the post in a new tab. Clicking outside or pressing Escape closes the results panel.
No plugins, no npm, no build tools. Just paste and configure.
Edit these 5 values at the top of the script
| Setting | Description | Example |
|---|---|---|
| SITE_URL | Your WordPress URL, no trailing slash | "https://myblog.com" |
| VOICE_LANG | BCP-47 language code for voice recognition | "ar-SA" / "fr-FR" |
| DIR | Text direction for input and layout | "ltr" or "rtl" |
| PLACEHOLDER | Hint text in the empty search box | "Search the site..." |
| MAX | Maximum number of results to display | 20 |
Four ways to add the widget to your site
* Firefox does not support the Web Speech API. The mic button is automatically hidden; text search works fully.
أداة بحث بتصميم Google على موقع ووردبريس الخاص بك — تعمل بأي لغة، تُحمَّل فوراً، ولا تحتاج إلى أي إضافات خارجية.
خفيفة، سريعة، بدون أي اعتماديات خارجية. تعمل مباشرة على أي موقع ووردبريس.
تظهر النتائج أثناء الكتابة. يبحث في عناوين المقالات باستخدام نظام تسجيل ذكي — التطابق الكامل أولاً، ثم الجزئي، ثم الكلمات المنفردة.
زر ميكروفون بألوان Google الأصلية. يعرض النص مباشرة أثناء الكلام، ثم يُطلق البحث عند انتهاء التعرف. يدعم أي كود لغة BCP-47.
البحث النصي يعمل مع Unicode — يتعرف على العربية والإنجليزية والفرنسية والصينية والعبرية والفارسية واليابانية وغيرها بدون أي إعداد.
إعداد واحد يُبدّل الأداة بالكامل بين العربي (يمين لليسار) والإنجليزي (يسار لليمين). الإدخال والنتائج والتخطيط كلها تتكيف تلقائياً.
تُجلب المقالات عند تحميل الصفحة عبر WordPress REST API وتُخزَّن في الذاكرة. كل بحث لاحق فوري — لا طلبات شبكة إضافية.
شريط بحث دائري، ظلال ناعمة، انتقالات سلسة، محمّل هيكلي، وأنيميشن متتابع للنتائج — كل هذا بدون مكتبة واحدة.
يتكيف مع جميع أحجام الشاشات — سطح المكتب، الجهاز اللوحي، والهاتف. أزرار ملائمة للمس وخطوط مناسبة في كل نقطة توقف.
كل ما تحتاج تغييره: رابط موقعك، لغة الصوت، اتجاه النص، نص العنصر النائب، والحد الأقصى للنتائج. كل شيء آخر تلقائي.
عند فتح الصفحة، تستدعي الأداة WordPress REST API بصمت وتُخزّن جميع عناوين وروابط المقالات في الذاكرة.
للنص: تظهر النتائج بعد حرفين مع تأخير 200ms. للصوت: اضغط الميكروفون وتكلّم، ويُوضع النص تلقائياً في مربع البحث.
لكل مقال درجة — تطابق العنوان الكامل 100، جزئي 60، الكلمات المنفردة +15. تُعرض أفضل النتائج مرتبة مع تمييز الكلمات.
كل بطاقة نتيجة تفتح المقال في تبويب جديد. النقر خارج الأداة أو الضغط على Escape يُغلق لوحة النتائج.
لا إضافات، لا npm، لا أدوات بناء. فقط الصق وعدّل الإعدادات.
غيّر هذه القيم الخمس في أعلى الكود
| الإعداد | الوصف | مثال |
|---|---|---|
| SITE_URL | رابط موقعك بدون شرطة مائلة في النهاية | "https://myblog.com" |
| VOICE_LANG | كود BCP-47 للغة التعرف الصوتي | "ar-SA" / "en-US" |
| DIR | اتجاه النص في مربع البحث | "rtl" أو "ltr" |
| PLACEHOLDER | النص التوضيحي داخل مربع البحث الفارغ | "ابحث في الموقع..." |
| MAX | الحد الأقصى لعدد النتائج المعروضة | 20 |
أربع طرق لإضافة الأداة إلى صفحتك
* Firefox لا يدعم Web Speech API. يُخفى زر الميكروفون تلقائياً؛ البحث النصي يعمل بشكل كامل.