Displaying Relationships (Front-End)

Tujuan

Menampilkan relasi antara post di frontend:

1. Di halaman single event → tampilkan related programs
2. Di halaman single program → tampilkan upcoming events yang berhubungan

---

Bagian 1: Menampilkan Related Programs di Single Event

Konsep

ACF Relationship field mengembalikan array of post objects. Kita bisa loop array ini dengan foreach.

Kode di single-event.php

Tambahkan kode berikut setelah div generic-content:

<?php
  $relatedPrograms = get_field('related_programs');

  if ($relatedPrograms) {
    echo '<hr class="section-break">';
    echo '<h2 class="headline headline--medium">Related Program(s)</h2>';
    echo '<ul class="link-list min-list">';

    foreach ($relatedPrograms as $program) { ?>
      <li><a href="<?php echo get_the_permalink($program); ?>"><?php echo get_the_title($program); ?></a></li>
    <?php }

    echo '</ul>';
  }
?>

Penjelasan Detail

Baris	Penjelasan
get_field('related_programs')	Ambil array of post objects dari ACF relationship field
if ($relatedPrograms)	Hanya jalankan kode jika field tidak kosong (cegah error jika belum ada relasi)
foreach ($relatedPrograms as $program)	Loop setiap item di array
get_the_title($program)	Ambil judul dari post object (bukan the_title() karena kita tidak dalam WP Loop)
get_the_permalink($program)	Ambil permalink dari post object

Perbedaan the_title() vs get_the_title()

Fungsi	Kapan Dipakai	Cara Pakai
the_title()	Dalam WordPress Loop (while have_posts)	Otomatis echo
get_the_title($post)	Di luar loop, perlu pass post object/ID	Perlu echo manual

⚠️ Selalu wrap kode relationship dalam if statement! Jika field kosong dan kamu coba foreach pada variabel kosong, PHP akan error.

---

Bagian 2: Menampilkan Related Events di Single Program

Tantangan

Di single program, tidak ada custom field yang menunjuk ke events. Relasi hanya disimpan di sisi event (event → program). Solusi: gunakan custom query dengan meta_query untuk mencari events yang merujuk ke program ini.

Kode di single-program.php

Tambahkan setelah div generic-content:

<?php
  $today = date('Ymd');
  $homepageEvents = new WP_Query(array(
    'posts_per_page' => 2,
    'post_type' => 'event',
    'meta_key' => 'event_date',
    'orderby' => 'meta_value_num',
    'order' => 'ASC',
    'meta_query' => array(
      array(
        'key' => 'event_date',
        'compare' => '>=',
        'value' => $today,
        'type' => 'numeric'
      ),
      array(
        'key' => 'related_programs',
        'compare' => 'LIKE',
        'value' => '"' . get_the_ID() . '"'
      )
    )
  ));

  if ($homepageEvents->have_posts()) {
    echo '<hr class="section-break">';
    echo '<h2 class="headline headline--medium">Upcoming ' . get_the_title() . ' Events</h2>';

    while ($homepageEvents->have_posts()) {
      $homepageEvents->the_post();
      $eventDate = new DateTime(get_field('event_date')); ?>

      <div class="event-summary">
        <a class="event-summary__date t-center" href="<?php the_permalink(); ?>">
          <span class="event-summary__month"><?php echo $eventDate->format('M'); ?></span>
          <span class="event-summary__day"><?php echo $eventDate->format('d'); ?></span>
        </a>
        <div class="event-summary__content">
          <h5 class="event-summary__title headline headline--tiny">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h5>
          <p><?php echo wp_trim_words(get_the_content(), 18); ?></p>
        </div>
      </div>

    <?php }
  }

  wp_reset_postdata();
?>

Penjelasan Meta Query Tambahan

array(
  'key' => 'related_programs',
  'compare' => 'LIKE',
  'value' => '"' . get_the_ID() . '"'
)

Bagian	Penjelasan
key	Custom field related_programs yang disimpan di event posts
compare	LIKE — cari string yang mengandung value
value	ID program saat ini, dibungkus dengan tanda kutip

Mengapa Perlu Tanda Kutip di Value?

WordPress menyimpan array relationship sebagai serialized string di database:

a:1:{i:0;s:2:"42";}

Jika program ID = 12 dan kita cari tanpa kutip:

• 12 → cocok dengan 12, 120, 1200 (false positive!)

Jika kita cari "12" (dengan kutip):

• "12" → hanya cocok dengan "12" persis ✅

// ❌ Salah — bisa match false positives
'value' => get_the_ID()

// ✅ Benar — hanya match ID yang tepat
'value' => '"' . get_the_ID() . '"'

Wrap dalam IF Statement

if ($homepageEvents->have_posts()) {
  // Tampilkan heading & events
}

Ini mencegah heading "Upcoming Events" muncul di halaman program yang tidak punya event terkait.

---

Alur Relasi 2 Arah

┌─────────────────────┐         ┌──────────────────────┐
│   EVENT POST         │         │   PROGRAM POST       │
│   (Science of Cats)  │         │   (Biology)          │
│                      │         │                      │
│ Custom Field:        │         │ Tidak ada field      │
│ related_programs:    │────────▶│ ke events            │
│   [Biology]          │         │                      │
│                      │         │ Solusi: Custom Query  │
│                      │◀────────│ meta_query LIKE      │
│                      │         │ di related_programs   │
└─────────────────────┘         └──────────────────────┘

Arah	Metode	Lokasi Kode
Event → Program	get_field('related_programs') + foreach	single-event.php
Program → Event	WP_Query + meta_query LIKE	single-program.php