Kursus WordPress

Appearance

Chapter 3: WordPress Specific PHP — The Famous "Loop" in WordPress ​

Ringkasan ​

Video ini membahas The Loop — konsep paling fundamental di WordPress. Loop adalah mekanisme untuk menampilkan konten (posts/pages) dari database ke halaman website secara berulang. Kita juga belajar tentang template hierarchy WordPress: index.php, single.php, dan page.php.

Konsep Utama ​

Apa itu The Loop? ​

The Loop adalah pola while loop yang melakukan sesuatu sekali untuk setiap item (post/page) dalam collection. Bahkan jika collection hanya berisi 1 item, tetap menggunakan loop.

Template Hierarchy (File mana yang dipakai WordPress?) ​

URL yang dikunjungiFile yang digunakan WordPress
Homepage (/)index.php (fallback default)
Single post (/2024/01/01/post-slug/)single.php → fallback ke index.php
Single page (/about-us/)page.php → fallback ke index.php

Step-by-Step ​

Step 1: Persiapan — Buat Dummy Posts ​

  1. Buka WordPress Admin → klik Posts di sidebar
  2. Klik Add New → judul: "Test Post" → isi content dummy → Publish
  3. Klik Add New lagi → judul: "Second Test Post" → isi content dummy → Publish

Sekarang kita punya 3 posts (termasuk "Hello World" bawaan).

Step 2: Tulis The Loop di index.php ​

Hapus semua isi sebelumnya, ganti dengan:

📄 index.php

php
<?php

while(have_posts()) {
    the_post(); ?>
    <h2>Hello</h2>
<?php }

?>

Penjelasan kode:

KodeFungsi
while(have_posts())Terus looping selama masih ada posts yang belum ditampilkan
the_post()Menyiapkan data post berikutnya (judul, konten, dll). Ini juga berfungsi sebagai counter otomatis
?> dan <?phpKeluar/masuk PHP mode agar bisa menulis HTML di tengah loop

Hasil: Muncul 3x tulisan "Hello" (karena ada 3 posts).

Step 3: Tampilkan Judul Post ​

Ganti <h2>Hello</h2> dengan judul dinamis:

php
<?php

while(have_posts()) {
    the_post(); ?>
    <h2><?php the_title(); ?></h2>
<?php }

?>
Fungsi WordPressKegunaan
the_title()Menampilkan judul post/page yang sedang di-loop

Step 4: Tampilkan Konten + Horizontal Rule ​

php
<?php

while(have_posts()) {
    the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
    <hr>
<?php }

?>
Fungsi WordPressKegunaan
the_content()Menampilkan isi/body content dari post/page

Bungkus judul dengan tag <a> agar bisa diklik menuju halaman detail post:

php
<?php

while(have_posts()) {
    the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content(); ?>
    <hr>
<?php }

?>
Fungsi WordPressKegunaan
the_permalink()Menampilkan URL permanen (permalink) ke halaman detail post/page tersebut

Cara kerja: WordPress otomatis tahu data mana yang harus di-query dari database berdasarkan URL:

  • Di homepage → query 10 post terbaru (default)
  • Di URL single post → query 1 post berdasarkan slug di URL

Step 6: Buat single.php untuk Halaman Detail Post ​

Saat klik link judul post, WordPress akan mencari file single.php. Jika tidak ada, WordPress fallback ke index.php.

📄 single.php (buat file baru di folder theme)

php
<?php

while(have_posts()) {
    the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
<?php }

?>

Perbedaan dengan index.php:

  • ❌ Tidak ada tag <a> di judul (karena sudah di halaman detail, tidak perlu link)
  • ❌ Tidak ada <hr> (tidak perlu separator karena hanya 1 post)

Step 7: Buat page.php untuk Halaman Individual Page ​

WordPress menggunakan single.php hanya untuk posts, bukan pages. Untuk individual pages, WordPress mencari page.php.

Persiapan:

  1. Buka WordPress Admin → Pages → Add New
  2. Judul: "Test Page 123" → isi content dummy → Publish

📄 page.php (buat file baru di folder theme)

php
<?php

while(have_posts()) {
    the_post(); ?>
    <h1>This is a page, not a post</h1>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
<?php }

?>

Line <h1>This is a page, not a post</h1> hanya untuk membuktikan bahwa file page.php yang sedang digunakan. Ini akan dihapus nanti.

Struktur Folder Theme Saat Ini ​

📁 fictional-university-theme/
  ├── 📄 index.php      ← template homepage (loop + link posts)
  ├── 📄 single.php     ← template individual blog post
  ├── 📄 page.php       ← template individual page
  ├── 📄 style.css
  └── 🖼️ screenshot.png

Analogi & Poin Penting ​

  • The Loop adalah jantung WordPress — setiap developer WordPress pasti mengenal istilah ini
  • WordPress secara otomatis menentukan file template mana yang digunakan berdasarkan URL
  • index.php adalah fallback terakhir — kalau tidak ada file yang lebih spesifik, WordPress memakai ini
  • Fungsi the_post() bertindak seperti counter otomatis — kita tidak perlu mengelola variabel counter sendiri
  • Fungsi yang diawali "the_" akan langsung echo/output ke halaman (contoh: the_title(), the_content(), the_permalink())