3 Column Layout & Custom Display per Post Type

Update JavaScript: Gunakan Custom API URL

Ganti $.when().then() → Single $.getJSON()

// Search.js — getResults() method

getResults() {
  $.getJSON(
    universityData.root_url + "/wp-json/university/v1/search?term=" + this.searchField.val(),
    (results) => {
      this.resultsDiv.html(`
        <div class="row">
          <div class="one-third">
            <h2 class="search-overlay__section-title">General Information</h2>
            ${results.generalInfo.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
              ${results.generalInfo.map(item => `
                <li><a href="${item.permalink}">${item.title}
                  ${item.postType == 'post' ? ` by ${item.authorName}` : ''}
                </a></li>
              `).join('')}
            ${results.generalInfo.length ? '</ul>' : ''}
          </div>
          
          <div class="one-third">
            <h2 class="search-overlay__section-title">Programs</h2>
            ${results.programs.length ? '<ul class="link-list min-list">' : `<p>No programs match that search. <a href="${universityData.root_url}/programs">View all programs</a></p>`}
              ${results.programs.map(item => `
                <li><a href="${item.permalink}">${item.title}</a></li>
              `).join('')}
            ${results.programs.length ? '</ul>' : ''}
            
            <h2 class="search-overlay__section-title">Professors</h2>
            ${results.professors.length ? '<ul class="professor-cards">' : '<p>No professors match that search.</p>'}
              ${results.professors.map(item => `
                <li class="professor-card__list-item">
                  <a href="${item.permalink}">
                    <img class="professor-card__image" src="${item.image}">
                    <span class="professor-card__name">${item.title}</span>
                  </a>
                </li>
              `).join('')}
            ${results.professors.length ? '</ul>' : ''}
          </div>
          
          <div class="one-third">
            <h2 class="search-overlay__section-title">Campuses</h2>
            ${results.campuses.length ? '<ul class="link-list min-list">' : `<p>No campuses match that search. <a href="${universityData.root_url}/campuses">View all campuses</a></p>`}
              ${results.campuses.map(item => `
                <li><a href="${item.permalink}">${item.title}</a></li>
              `).join('')}
            ${results.campuses.length ? '</ul>' : ''}
            
            <h2 class="search-overlay__section-title">Events</h2>
            ${results.events.length ? '' : `<p>No events match that search. <a href="${universityData.root_url}/events">View all events</a></p>`}
              ${results.events.map(item => `
                <div class="event-summary">
                  <a class="event-summary__date t-center" href="${item.permalink}">
                    <span class="event-summary__month">${item.month}</span>
                    <span class="event-summary__day">${item.day}</span>
                  </a>
                  <div class="event-summary__content">
                    <h5 class="event-summary__title headline headline--tiny"><a href="${item.permalink}">${item.title}</a></h5>
                    <p>${item.description} <a href="${item.permalink}" class="nu gray">Read more</a></p>
                  </div>
                </div>
              `).join('')}
          </div>
        </div>
      `);
      this.isSpinnerVisible = false;
    }
  );
}

Perbedaan dari Default REST API URL

Aspek	Default WordPress API	Custom API URL
URL	/wp-json/wp/v2/posts	/wp-json/university/v1/search
Requests needed	6 (per post type)	1
Title property	item.title.rendered	item.title
Link property	item.link	item.permalink
Search param	?search=	?term=
Data size	Semua fields per post	Hanya fields yang dibutuhkan

Layout per Post Type

General Info (Posts + Pages)

• Plain text list (link-list min-list)
• Posts menampilkan "by authorName"
• No-result message + tidak perlu link

Programs

• Plain text list
• No-result: link ke /programs

Professors

• Image cards (professor-cards class)
• Foto professor dengan nama overlay
• HTML dari single-program.php (copy-paste + ganti PHP → JS expression)
• Perlu property image di JSON (dari get_the_post_thumbnail_url(0, 'professorLandscape'))

Campuses

• Plain text list
• No-result: link ke /campuses

Events

• Custom layout dengan circle date (month + day) + description
• HTML dari template-parts/content-event.php (copy-paste + ganti PHP → JS expression)
• Perlu properties: month, day, description di JSON
• Tidak pakai <ul> — event styling sendiri

Tips: No-Result Messages dengan Link Fleksibel

Gunakan template literal (backtick) di ternary false branch + universityData.root_url:

`<p>No programs match that search. <a href="${universityData.root_url}/programs">View all programs</a></p>`

Jangan Lupa

Setelah HTML results di-render, tambahkan:

this.isSpinnerVisible = false;