Custom Fields

Apa Itu Custom Fields?

Custom fields memungkinkan kita menambahkan data tambahan ke sebuah post di luar title, content, dan excerpt. Contoh: tanggal event, lokasi, harga, dsb.

WordPress punya fitur custom fields bawaan, tapi user experience-nya sangat buruk — user harus mengetik nama field secara manual. Solusi: gunakan plugin Advanced Custom Fields (ACF).

---

Langkah 1: Install Plugin Advanced Custom Fields

1. Buka WordPress Admin → Plugins → Add New
2. Cari: Advanced Custom Fields
3. Pastikan plugin oleh Elliot dengan 1 juta+ instalasi aktif
4. Klik Install Now → Activate

💡 Ada 2 plugin industri standar untuk custom fields: ACF dan CMB2. Course ini menggunakan ACF karena lebih mudah dipakai.

---

Langkah 2: Membuat Field Group

1. Di sidebar admin, klik Custom Fields (menu baru dari ACF)
2. Klik Add New
3. Nama field group: Event Date
4. Klik Add Field:

Setting	Nilai
Field Label	Event Date
Field Name	event_date (otomatis generate)
Field Type	Date Picker
Required	Yes
Display Format	Default
Return Format	Ymd (Penting! untuk kompatibel dengan PHP)

5. Scroll ke bawah ke bagian Location:
   • Show this field group if: Post Type is equal to Event
6. Klik Publish

⚠️ Return Format harus Ymd (contoh: 20170720). Format ini kompatibel dengan PHP DateTime class dan memudahkan sorting/comparison.

---

Langkah 3: Mengisi Event Date

1. Edit event post (misalnya Poetry Day)
2. Di bawah konten, muncul field Event Date dengan date picker
3. Pilih tanggal → klik Update/Save

Isi tanggal untuk semua event:

• Poetry Day → 20 Juli
• Science of Cats → 30 Juni
• Math Meetup → 29 Juni

---

Langkah 4: Menampilkan Custom Field di Frontend

Fungsi dari ACF

Fungsi	Penjelasan
the_field('field_name')	Echo nilai field langsung ke halaman
get_field('field_name')	Return nilai field (tanpa echo) — gunakan saat perlu proses dulu

Menampilkan Tanggal Event di front-page.php

Custom field event_date menyimpan tanggal dalam format Ymd (contoh: 20170720). Kita perlu konversi ke format yang readable menggunakan PHP DateTime class.

<?php
  $eventDate = new DateTime(get_field('event_date'));
?>

<span class="event-summary__month">
  <?php echo $eventDate->format('M'); ?>
</span>
<span class="event-summary__day">
  <?php echo $eventDate->format('d'); ?>
</span>

Penjelasan Kode

Baris	Penjelasan
get_field('event_date')	Ambil nilai custom field (return string "20170720")
new DateTime(...)	Buat objek DateTime dari string tanggal
$eventDate->format('M')	Format ke 3-huruf bulan (Jul, Jun, Sep)
eventDate->format('d')	Format ke 2-digit hari (20, 30, 29)

Format DateTime yang Sering Dipakai

Kode	Output	Keterangan
'Y'	2017	Tahun 4 digit
'm'	07	Bulan 2 digit
'd'	20	Hari 2 digit
'M'	Jul	Bulan singkatan 3 huruf
'F'	July	Bulan nama lengkap
'D'	Thu	Hari singkatan 3 huruf

---

Catatan Tentang the_field vs get_field

// ❌ Jangan pakai the_field() di dalam function/expression
$eventDate = new DateTime(the_field('event_date')); // SALAH - the_field() langsung echo

// ✅ Pakai get_field() untuk mendapat return value
$eventDate = new DateTime(get_field('event_date')); // BENAR - get_field() return string

💡 Pola yang sama dengan fungsi WordPress bawaan: the_title() echo langsung, get_the_title() return value.

---

Catatan: WordPress Post Edit Screen

Mulai Juli 2021, semua video di course ini sudah terupdate untuk menunjukkan Block Editor modern. Jika tampilan edit screen kamu berbeda dari video, tidak perlu khawatir — semua solusi di course ini bekerja dengan baik di WordPress versi terbaru.