Traditional WordPress Searching (Part 1)

Ringkasan

Video ini membahas cara membuat pencarian tradisional WordPress sebagai fallback untuk pengunjung yang tidak memiliki JavaScript aktif. Meskipun 99% pengunjung memiliki JavaScript, kita tetap perlu menyediakan alternatif untuk 1% sisanya. Kita akan membuat halaman pencarian dengan form HTML yang bekerja tanpa JavaScript.

---

1. Cara Kerja Pencarian WordPress Default

WordPress sudah punya sistem pencarian bawaan melalui URL parameter ?s=:

https://yoursite.com/?s=biology

• WordPress akan mencari semua post yang mengandung kata "biology"
• Hasilnya ditampilkan menggunakan index.php (makanya semua terlihat seperti blog post)
• Jika ada file search.php di theme folder, WordPress akan menggunakan file tersebut sebagai gantinya

---

2. Membuat Halaman Pencarian Baru

Langkah 1: Buat Page di WordPress Admin

1. Pergi ke Pages → Add New
2. Judul: Search
3. Body biarkan kosong
4. Publish

Langkah 2: Buat Template Khusus untuk Halaman Search

Buat file baru di theme folder: page-search.php

WordPress Template Hierarchy: file page-{slug}.php hanya digunakan untuk page dengan slug yang sesuai.

Copy isi dari page.php, lalu modifikasi bagian konten:

<?php
get_header();
while(have_posts()) {
  the_post();
  pageBanner();
  ?>

  <div class="container container--narrow page-section">
    <!-- Hapus the_content(), ganti dengan form pencarian -->
    <form class="search-form" action="<?php echo esc_url(site_url('/')); ?>" method="get">
      <label class="headline headline--medium" for="s">Perform a New Search</label>
      <div class="search-form-row">
        <input type="search" name="s" id="s" placeholder="What are you looking for?">
        <input type="submit" class="search-submit" value="Search">
      </div>
    </form>
  </div>

<?php }
get_footer();
?>

Penjelasan Elemen Form:

Atribut	Penjelasan
action="<?php echo esc_url(site_url('/')); ?>"	Form dikirim ke root URL (bukan ke halaman search itu sendiri)
method="get"	Data form ditambahkan ke URL (agar muncul ?s=kata)
name="s"	Wajib huruf kecil s — ini format standar WordPress untuk pencarian
type="search"	Tipe input HTML modern khusus pencarian
for="s" dan id="s"	Label dikaitkan dengan input — klik label langsung fokus ke input
placeholder	Teks petunjuk yang muncul saat input kosong

---

3. Fungsi Keamanan: esc_url()

<?php echo esc_url(site_url('/')); ?>

• esc_url() = fungsi keamanan WordPress untuk meng-escape URL dari database
• Best practice: selalu gunakan esc_url() setiap kali echo URL dari database
• Tujuannya: melindungi pengunjung jika situs sudah diretas/compromised
• Berlaku juga untuk penggunaan site_url() di header.php dan file lainnya

---

4. Mengubah Ikon Search Menjadi Link

Agar pengunjung tanpa JavaScript bisa mengakses halaman pencarian, ubah ikon search di header dari <span> menjadi <a> (link).

File: header.php

Ada 2 lokasi ikon search (mobile dan desktop):

<!-- SEBELUM (span, tidak bisa diklik tanpa JS) -->
<span class="js-search-trigger site-header__search-trigger">
  <i class="fa fa-search" aria-hidden="true"></i>
</span>

<!-- SESUDAH (anchor tag, bisa diklik tanpa JS) -->
<a href="<?php echo esc_url(site_url('/search')); ?>" class="js-search-trigger site-header__search-trigger">
  <i class="fa fa-search" aria-hidden="true"></i>
</a>

Penting: Lakukan perubahan yang sama untuk KEDUA lokasi (mobile & desktop)!

---

5. Mencegah Default Link Behavior di JavaScript

Dengan JavaScript aktif, kita tidak ingin klik ikon search membuka halaman baru — kita ingin overlay search muncul.

File: modules/Search.js

Tambahkan return false di akhir method openOverlay:

openOverlay() {
  // ... kode sebelumnya ...
  return false; // Mencegah default behavior link <a>
}

• return false = mencegah browser mengikuti href pada link
• Dengan JavaScript aktif: klik ikon → overlay muncul (seperti biasa)
• Tanpa JavaScript: klik ikon → menuju /search page (fallback)

---

6. Styling Form Pencarian

CSS Classes yang Digunakan:

<form class="search-form">
  <label class="headline headline--medium" for="s">Perform a New Search</label>
  <div class="search-form-row">
    <input type="search" name="s" id="s" class="s" placeholder="What are you looking for?">
    <input type="submit" class="search-submit" value="Search">
  </div>
</form>

• search-form — class pada form untuk styling keseluruhan
• search-form-row — wrapper div agar input dan button sejajar
• s — class pada input text
• search-submit — class pada tombol submit
• headline headline--medium — class pada label agar teks lebih besar

---

Diagram Alur

Pengunjung klik ikon Search
        │
        ├── JavaScript AKTIF?
        │       │
        │       YES → return false → Overlay search muncul
        │       
        └── JavaScript TIDAK AKTIF?
                │
                YES → <a href="/search"> → Halaman page-search.php
                        │
                        └── Isi form → Submit → ?s=kata → Hasil pencarian