Kursus WordPress

Appearance

Chapter 3: WordPress Specific PHP — Header & Footer ​

Ringkasan ​

Video ini membahas cara membuat header dan footer global yang muncul di semua halaman website, cara memuat (load) CSS ke frontend, membuat file functions.php, dan menambahkan admin bar WordPress.

Masalah yang Dipecahkan ​

Jika kita menambahkan header/footer langsung di index.php, maka:

  • ❌ Header/footer hanya muncul di homepage
  • ❌ Halaman yang dirender oleh single.php atau page.php tidak punya header/footer
  • ❌ Harus copy-paste kode yang sama ke banyak file = bad practice (duplikasi kode)

Solusi: Buat file header.php dan footer.php sebagai single source of truth.

Step-by-Step ​

Step 1: Buat header.php ​

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

html
<h1>Greetings from header.php</h1>

Ini hanya dummy text untuk testing. Nanti akan diganti.

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

html
<p>Greetings from footer.php</p>

📄 index.php — ubah menjadi:

php
<?php
get_header();

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

get_footer();
?>
Fungsi WordPressKegunaan
get_header()Menyertakan (include) isi file header.php
get_footer()Menyertakan (include) isi file footer.php

Step 4: Tambahkan ke single.php dan page.php ​

📄 single.php

php
<?php
get_header();

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

get_footer();
?>

📄 page.php

php
<?php
get_header();

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

get_footer();
?>

Sekarang semua halaman (homepage, single post, dan page) memiliki header & footer yang sama.

Step 5: Setup HTML Skeleton di header.php ​

Ganti dummy text dengan struktur HTML yang proper:

📄 header.php — versi baru:

html
<!DOCTYPE html>
<html>
  <head>
    <?php wp_head(); ?>
  </head>
  <body>
    <h1>Fictional University</h1>

Penjelasan:

KodeFungsi
<!DOCTYPE html>Deklarasi standar HTML5
<head>Section untuk metadata, CSS, dll
wp_head()Memberi WordPress kontrol penuh atas <head> section — WordPress & plugin bisa inject CSS/JS di sini
<body>Awal konten yang terlihat

PENTING: Tidak menutup </body> dan </html> di sini! Penutupan dilakukan di footer.php.

📄 footer.php — versi baru:

html
    <p>Greetings from footer.php</p>

    <?php wp_footer(); ?>
  </body>
</html>
KodeFungsi
wp_footer()Memberi WordPress kontrol sebelum </body> — digunakan untuk load JavaScript files & menampilkan admin bar (bar hitam di atas halaman)
</body></html>Menutup tag yang dibuka di header.php

Gambaran besar bagaimana halaman dirender:

header.php  → <!DOCTYPE html><html><head>...</head><body>
index.php   → konten utama halaman (loop, dll)
footer.php  → wp_footer() + </body></html>

Step 7: Buat functions.php untuk Memuat CSS ​

File functions.php adalah file behind the scenes — tempat kita "berkomunikasi" dengan sistem WordPress (bukan template yang dilihat visitor).

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

php
<?php

function university_files() {
    wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'university_files');

Penjelasan kode detail:

Bagian 1: Definisi function ​

php
function university_files() {
    wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}
KodePenjelasan
function university_files()Membuat function baru (nama bebas, yang penting mudah diingat)
wp_enqueue_style()Fungsi WordPress untuk memuat/load file CSS
'university_main_styles'Nickname untuk stylesheet ini (nama bebas)
get_stylesheet_uri()Fungsi WordPress yang otomatis mengembalikan URL ke file style.css di folder theme

Bagian 2: Hook ke WordPress ​

php
add_action('wp_enqueue_scripts', 'university_files');
KodePenjelasan
add_action()Fungsi WordPress untuk memberi instruksi — "pada momen tertentu, jalankan function ini"
'wp_enqueue_scripts'Hook/event WordPress — momen ketika WordPress siap memuat CSS & JS files
'university_files'Nama function yang ingin kita jalankan pada momen tersebut

Kenapa tidak pakai () setelah nama function di add_action? Karena kita tidak memanggil function-nya langsung. Kita cuma memberitahu WordPress: "Ini nama function-nya, kamu yang panggil nanti di momen yang tepat."

Hasil ​

Setelah save functions.php + header.php, refresh browser:

  • CSS dari style.css sudah ter-load (misal jika ada body { color: orange; }, teks akan berwarna orange)
  • Admin bar (bar hitam) muncul di atas halaman saat login

Struktur Folder Theme Saat Ini ​

📁 fictional-university-theme/
  ├── 📄 index.php        ← template homepage
  ├── 📄 single.php       ← template single blog post
  ├── 📄 page.php         ← template individual page
  ├── 📄 header.php       ← ⭐ BARU: global header (HTML skeleton + wp_head)
  ├── 📄 footer.php       ← ⭐ BARU: global footer (wp_footer + closing tags)
  ├── 📄 functions.php    ← ⭐ BARU: behind-the-scenes (load CSS, dll)
  ├── 📄 style.css
  └── 🖼️ screenshot.png

Poin Penting ​

  • get_header() dan get_footer() = cara WordPress meng-include file terpisah agar tidak duplikasi kode
  • wp_head() wajib ada di dalam <head> — memberi WordPress & plugin kontrol untuk inject CSS/JS
  • wp_footer() wajib ada sebelum </body> — untuk load JS dan menampilkan admin bar
  • functions.php adalah pusat konfigurasi theme — bukan template, melainkan tempat mendaftarkan fitur/aset
  • add_action() adalah salah satu fungsi terpenting di WordPress — akan digunakan berulang kali sepanjang kursus
  • Hook wp_enqueue_scripts digunakan untuk memuat CSS & JS files
  • Untuk load JS alih-alih CSS, gunakan wp_enqueue_script() (singular "script", bukan "scripts")