Kursus WordPress

Appearance

Chapter 2: First Coding Steps: PHP — Creating a New Theme ​

Ringkasan ​

Video ini membahas cara membuat WordPress theme baru dari nol. Kita hanya perlu membuat 1 folder dan 2 file untuk mendaftarkan theme baru yang bisa diaktifkan dari admin dashboard.

Konsep Utama ​

  • WordPress mengenali theme berdasarkan folder di dalam wp-content/themes/
  • Setiap folder theme minimal harus memiliki 2 file: index.php dan style.css
  • File style.css punya tanggung jawab khusus di WordPress: memberikan informasi tentang theme melalui CSS comment di bagian atas

Step-by-Step ​

Step 1: Buat Folder Theme Baru ​

Navigasi ke:

wp-content/themes/

Buat folder baru dengan nama:

fictional-university-theme

Penting: Gunakan huruf kecil dan dash (-) sebagai pengganti spasi pada nama folder.

Step 2: Buat File index.php ​

Buka folder fictional-university-theme di VS Code, lalu buat file baru:

📄 index.php

php
This is our amazing custom theme

Untuk sementara, cukup teks placeholder biasa. Nanti akan diisi kode PHP.

Step 3: Buat File style.css ​

Buat file baru di folder theme:

📄 style.css

css
/*
  Theme Name: Fictional University
  Author: NamaKamu
  Version: 1.0
*/

Penjelasan setiap baris:

FieldFungsi
Theme NameNama theme yang tampil di admin dashboard (boleh pakai spasi & huruf besar)
AuthorNama pembuat theme
VersionNomor versi theme

PENTING: File harus bernama style.css — bukan main.css atau nama lain. WordPress secara spesifik mencari file dengan nama ini.

Step 4: Cek Theme di Admin Dashboard ​

  1. Buka browser → pergi ke /wp-admin
  2. Klik menu Appearance di sidebar
  3. Theme baru "Fictional University" akan muncul di daftar themes
  4. Klik Theme Details untuk melihat info (nama, author, version)

Step 5: Tambahkan Screenshot (Opsional tapi Direkomendasikan) ​

Untuk menambahkan preview image pada theme:

  1. Siapkan file gambar (idealnya 1200x900 pixel)
  2. Rename file menjadi screenshot.png
  3. Pindahkan ke dalam folder theme (fictional-university-theme/)

WordPress otomatis mencari file bernama screenshot.png di root folder theme.

Step 6: Aktifkan Theme ​

  1. Di admin Appearance screen, hover pada theme baru
  2. Klik "Activate"
  3. Klik "View Site" untuk melihat website di frontend

Hasilnya: Website akan menampilkan teks dari index.php → "This is our amazing custom theme"

Step 7: Hapus Theme Bawaan (Opsional) ​

Untuk menghindari mengaktifkan theme lain secara tidak sengaja:

  1. Buka folder wp-content/themes/
  2. Hapus folder theme bawaan (twentyfifteen, twentysixteen, twentyseventeen, dll.)

Struktur Folder Theme Saat Ini ​

📁 fictional-university-theme/
  ├── 📄 index.php          ← template utama (sementara berisi placeholder text)
  ├── 📄 style.css           ← info theme + nantinya CSS styling
  └── 🖼️ screenshot.png      ← preview image theme (opsional)

Catatan Penting Tentang CSS ​

Jika kamu mencoba menambahkan CSS di bawah comment style.css:

css
/*
  Theme Name: Fictional University
  Author: NamaKamu
  Version: 1.0
*/

body {
  color: orange;
}

CSS ini belum akan bekerja! Karena kita belum memuat (load) file CSS ini ke frontend website. Cara memuat CSS akan dipelajari di video selanjutnya (Header & Footer).

Poin Penting ​

  • Membuat theme WordPress sangat sederhana — cukup 1 folder + 2 file
  • style.css bukan hanya untuk styling, tapi juga deklarasi identitas theme
  • index.php adalah template fallback universal — akan digunakan WordPress jika tidak ada template yang lebih spesifik
  • Perubahan pada index.php langsung terlihat saat refresh browser (karena bekerja lokal)