Style Child Theme WordPress Tidak Termuat

style.css child theme kamu tidak termuat karena WordPress tidak meng-enqueue-nya untukmu. Stylesheet child theme harus didaftarkan secara manual di functions.php milik child theme, dan enqueue itu hampir selalu punya salah satu dari dua bug: enqueue-nya memang tidak ada sama sekali, atau ia dimuat tanpa mendeklarasikan stylesheet parent sebagai dependency, sehingga aturan CSS kamu jatuh di posisi yang salah dalam cascade dan ditimpa. Perbaiki enqueue-nya dan style akan kembali muncul. Trik lama @import yang kemungkinan kamu salin dari tutorial tahun 2013 adalah solusi yang salah.

Kenapa ini terjadi

Child theme klasik terdiri dari dua file wajib: sebuah style.css dengan blok header yang menyebutkan parent-nya, dan sebuah functions.php. Baris Template: di header memberi tahu WordPress parent mana yang template-nya akan diwarisi. Itulah satu-satunya hal yang dilakukan WordPress secara otomatis. Ia membaca header, menyiapkan fallback template, lalu berhenti. Ia tidak pernah meng-enqueue style.css child kamu di sisi front end.

Sementara itu, parent theme meng-enqueue stylesheet miliknya dari functions.php miliknya, di-hook ke wp_enqueue_scripts. functions.php child kamu berjalan lebih dulu, lalu milik parent, lalu semua yang ada di hook itu dijalankan. Kalau child kamu tidak pernah memanggil wp_enqueue_style untuk file-nya sendiri, browser tidak akan pernah memintanya. Halamannya terlihat seperti parent theme mentah karena memang persis seperti itulah kenyataannya.

Kegagalan kedua lebih halus. Kamu meng-enqueue stylesheet child, ia termuat, tapi override kamu tidak berpengaruh apa-apa. Itu masalah urutan pemuatan (load order). Ketika dua aturan punya specificity yang sama, yang dimuat paling akhir yang menang. Kalau CSS child kamu dimuat sebelum milik parent, parent menang di setiap seri. Array dependency pada wp_enqueue_style itulah yang memaksa urutannya.

Satu hal lagi yang sering salah orang: get_template_directory_uri() menunjuk ke folder theme parent, sedangkan get_stylesheet_directory_uri() menunjuk ke folder theme yang aktif (child). Kalau kamu tukar keduanya, kamu justru meng-enqueue style.css parent untuk kedua kalinya dan tidak pernah menyentuh milik child.

Solusinya, berurutan

Pertama, pastikan apa yang benar-benar termuat. Buka halaman yang rusak, lihat source-nya (view source), lalu cari nama folder child theme kamu. WordPress me-render style yang di-enqueue sebagai <link id="handle-css" href="..."> — bagian id adalah handle kamu ditambah -css. Kalau style.css child kamu sama sekali tidak ada di dalam <head>, berarti enqueue-nya tidak jalan. Kalau ada tapi style-nya tidak diterapkan, itu masalah dependency/urutan. Pengecekan satu ini memberi tahu kamu mana dari dua bug tadi yang sedang kamu hadapi.

Kedua, temukan handle asli milik parent. Kebanyakan theme modern (Astra, GeneratePress, theme Twenty-*) sudah meng-enqueue stylesheet mereka sendiri di bawah handle tertentu — astra-theme-css, generate-style-css, twenty-twenty-four-style, dan seterusnya. Kamu butuh string persis itu. Grep parent theme-nya, atau baca dari <link id="...-css"> di view source (buang akhiran -css-nya).

Ketiga, tulis enqueue-nya. Untuk kasus umum di mana parent sudah memuat stylesheet-nya sendiri, kamu tidak perlu meng-enqueue ulang parent. Kamu hanya meng-enqueue child, dan mencantumkan handle parent sebagai dependency supaya milikmu dimuat setelahnya:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );

function child_enqueue_styles() {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'astra-theme-css' ), // <-- the parent's REAL handle
        wp_get_theme()->get( 'Version' )
    );
}

Kalau parent theme tidak meng-enqueue stylesheet-nya sendiri (beberapa theme lama atau minimalis mengandalkan @import), maka enqueue keduanya, dan buat child bergantung pada parent:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );

function child_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}

Argumen wp_get_theme()->get('Version') adalah cache-buster kamu. Naikkan baris Version: di header style.css child dan browser akan mengambil ulang file-nya. Kalau kamu lewati ini, kamu akan mengedit CSS lalu bersumpah tidak ada yang berubah padahal itu cuma masalah cache.

Kalau functions.php punya syntax error, seluruh file mati diam-diam dan tidak satu pun enqueue kamu berjalan — dan itu tampil persis seperti “style tidak termuat”. Nyalakan WP_DEBUG, atau tempel debug.log kamu ke WordPress error log decoder kami untuk cepat menemukan fatal error-nya.

Yang tidak boleh dilakukan

Jangan pakai @import. Saran era Codex adalah menaruh @import url("../parenttheme/style.css"); di bagian atas style.css child. Ini memang jalan, tapi lambat — browser tidak bisa mulai mengunduh CSS parent sampai ia selesai mem-parsing CSS child, jadi dua request itu berjalan berurutan alih-alih paralel. Handbook resmi WordPress sendiri sudah bertahun-tahun tidak merekomendasikannya. Kalau tutorialmu menyuruhmu melakukan ini, tutorial itulah penyebab style kamu berantakan.

Jangan hardcode handle 'parent-style' lalu meng-enqueue file parent secara buta. Snippet Codex yang terkenal itu melakukan persis ini, dan itu salah untuk theme apa pun yang sudah mendaftarkan stylesheet-nya di bawah handle yang berbeda. Kamu berakhir memuat CSS parent dua kali dan dependency kamu menunjuk ke handle yang mungkin tidak ada.

Jangan panggil wp_enqueue_style di level teratas functions.php. Ia harus dijalankan di dalam sebuah fungsi yang di-hook ke wp_enqueue_scripts. Kalau dipanggil terlalu awal, ia tidak melakukan apa-apa.

Jangan salin seluruh functions.php parent ke dalam child. Keduanya sama-sama dimuat; milik child berjalan lebih dulu. Menyalinnya menyebabkan deklarasi fungsi ganda dan fatal error.

Satu catatan: semua ini berlaku untuk theme klasik (berbasis template PHP). Kalau parent kamu adalah block theme, styling sebagian besar mengalir lewat theme.json dan Site Editor, dan override style.css berperilaku berbeda — untuk yang itu aku kurang yakin, jadi lebih baik uji langsung daripada mengasumsikan enqueue ini adalah solusinya.

Masih mentok?

Pastikan baris Template: di header style.css child persis sama dengan nama folder parent, case-sensitive — bukan nama tampilan (display name) parent. Lalu cek ulang view source: handle ada, dimuat setelah parent, query string versi sudah dinaikkan. Kalau <link>-nya ada, dimuat paling akhir, dan CSS-nya tetap tidak diterapkan, berarti ini bukan lagi masalah enqueue — ini soal specificity, dan solusinya bergeser ke dalam aturan CSS itu sendiri.