Single Campus & Relasi Campus ↔ Program

Tujuan

1. Menampilkan info popup saat klik pin di map
2. Membuat template single-campus.php
3. Membuat relasi Campus ↔ Program (dua arah)

---

Langkah 1: Info Popup di Map Pin

Di archive-campus.php, konten di dalam div .marker akan muncul sebagai popup saat pin diklik:

<div class="marker" data-lat="<?php echo $mapLocation['lat']; ?>" data-lng="<?php echo $mapLocation['lng']; ?>">
  <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
  <?php echo $mapLocation['address']; ?>
</div>

Klik pin → muncul judul (link) + alamat kampus.

---

Langkah 2: Template Single Campus

Buat file: single-campus.php (copy dari single-program.php, lalu modifikasi):

<?php get_header();

while (have_posts()) {
  the_post();
  pageBanner();
?>

<div class="container container--narrow page-section">
  <div class="metabox metabox--position-up metabox--with-home-link">
    <p>
      <a class="metabox__blog-home-link" href="<?php echo get_post_type_archive_link('campus'); ?>">
        <i class="fa fa-home" aria-hidden="true"></i> All Campuses
      </a>
      <span class="metabox__main"><?php the_title(); ?></span>
    </p>
  </div>

  <div class="generic-content">
    <?php the_content(); ?>
  </div>

  <?php
    // Map untuk satu campus
    $mapLocation = get_field('map_location');
  ?>
  <div class="acf-map">
    <div class="marker" data-lat="<?php echo $mapLocation['lat']; ?>" data-lng="<?php echo $mapLocation['lng']; ?>">
      <h3><?php the_title(); ?></h3>
      <?php echo $mapLocation['address']; ?>
    </div>
  </div>

  <?php
    // Related Programs
    $relatedPrograms = new WP_Query(array(
      'posts_per_page' => -1,
      'post_type' => 'program',
      'orderby' => 'title',
      'order' => 'ASC',
      'meta_query' => array(
        array(
          'key' => 'related_campus',
          'compare' => 'LIKE',
          'value' => '"' . get_the_ID() . '"'
        )
      )
    ));

    if ($relatedPrograms->have_posts()) {
      echo '<hr class="section-break">';
      echo '<h2 class="headline headline--medium">Programs Available At This Campus</h2>';
      echo '<ul class="min-list link-list">';

      while ($relatedPrograms->have_posts()) {
        $relatedPrograms->the_post(); ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
      <?php }

      echo '</ul>';
    }

    wp_reset_postdata();
  ?>
</div>

<?php }

get_footer(); ?>

⚠️ Di single campus, link di judul pin dihapus (karena sudah di halaman itu).

---

Langkah 3: ACF Relationship Field — Related Campus

1. Custom Fields → Add New
2. Group: Related Campus(es)
3. Add Field:
   • Label: Related Campus(es)
   • Name: related_campus
   • Type: Relationship
   • Filter by Post Type: Campus
   • Uncheck semua filter kecuali Search
4. Location: Post Type = Program

---

Langkah 4: Tampilkan Related Campuses di Single Program

Di single-program.php, tambahkan di akhir (sebelum closing while loop):

<?php
  wp_reset_postdata();

  $relatedCampuses = get_field('related_campus');

  if ($relatedCampuses) {
    echo '<hr class="section-break">';
    echo '<h2 class="headline headline--medium">' . get_the_title() . ' is Available At These Campuses</h2>';
    echo '<ul class="min-list link-list">';

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

    echo '</ul>';
  }
?>

Perbedaan WP_Query vs get_field() untuk Relasi

Pendekatan	Kapan Pakai
new WP_Query + meta_query LIKE	Reverse lookup — field relasi tidak ada di post ini, tapi di post lain
get_field('field_name')	Direct lookup — field relasi ada di post yang sedang dilihat

Single Campus → query programs yang memiliki related_campus berisi ID campus ini → WP_Query

Single Program → langsung ambil related_campus dari post ini → get_field()