Edit Tema Langsung? Awas Hilang! Cara Bikin Child Theme WordPress

Setelah tutorial ini, Anda bisa mengubah tampilan tema WordPress tanpa takut perubahan hilang saat tema diperbarui. Caranya memakai child theme: tema “anak” kecil yang menumpang pada tema utama. Pembaruan tema tetap berjalan, kustomisasi Anda tetap aman.

Sebelum mulai, siapkan#

Akses File Manager hosting atau FTP
Nama folder tema utama yang sedang dipakai
Backup situs (file dan database)
Login Administrator WordPress

Penting: pengaturan Customizer disimpan per tema. Setelah child theme diaktifkan, sebagian pengaturan (logo, warna, lokasi menu, widget) bisa kembali ke default. Ambil tangkapan layar pengaturan Anda sekarang, lalu cek ulang di langkah 6.

Cek nama folder tema utama#

Buka wp-content/themes/ lewat File Manager. Catat nama folder tema yang aktif, misalnya astra. Yang dipakai adalah nama folder, bukan nama yang tampil di menu Penampilan.

Buat folder child theme#

Di dalam wp-content/themes/, buat folder baru dengan nama tema utama ditambah -child, misalnya astra-child.

Buat file style.css#

Di folder child theme, buat file style.css dengan isi berikut. Ganti astra dengan nama folder tema utama Anda:

/*
Theme Name: Astra Child
Template: astra
Version: 1.0.0
*/

Baris Template harus sama persis dengan nama folder tema utama, huruf kecil semua. Salah satu huruf saja, WordPress tidak akan menemukan tema induknya.

Buat file functions.php#

Masih di folder yang sama, buat functions.php. File ini memuat CSS tema utama dan CSS child theme. Awali dengan <?php di baris pertama, tanpa spasi atau baris kosong sebelumnya:

<?php
add_action( 'wp_enqueue_scripts', function () {
    $versi = wp_get_theme()->get( 'Version' );

    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css',
        array(),
        wp_get_theme( get_template() )->get( 'Version' )
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( 'parent-style' ),
        $versi
    );
} );

Sebagian tema (terutama tema block) sudah memuat CSS induk sendiri. Kalau setelah diaktifkan tampilan terasa ganda atau berat, hapus dulu blok parent-style di atas lalu cek ulang.

Aktifkan child theme#

Buka Penampilan › Tema. Child theme muncul sebagai tema baru.
Pilih Aktifkan.
Buka situs di jendela samaran dan pastikan tampilannya sama seperti sebelumnya.

Cek pengaturan yang bergeser#

Penampilan › Menu: lokasi menu masih terpasang
Penampilan › Widget: widget sidebar dan footer masih ada
Logo, warna, dan font di Customizer sesuai catatan Anda

Pindahkan kustomisasi ke child theme#

CSS tambahan: tulis di bawah header style.css child theme.
Mengubah file template (misalnya footer.php): salin file itu dari tema utama ke folder child dengan nama dan jalur yang sama, lalu edit salinannya.
Fungsi PHP tambahan: tulis di functions.php child theme.

WordPress mencari file di child theme lebih dulu. Kalau file itu tidak ada, barulah memakai milik tema utama. Jadi cukup salin file yang benar-benar Anda ubah. functions.php berbeda: milik child dan milik tema utama dijalankan keduanya, bukan saling menimpa.
Kenapa tidak semua file disalin?

Kalau ada masalah#

Gejala	Penyebab umum	Solusi
Pesan “The parent theme is missing”	Isi `Template` tidak sama dengan nama folder tema utama	Perbaiki baris `Template` di `style.css`.
Situs tampil polos tanpa gaya	`functions.php` salah atau ada spasi sebelum `<?php`	Periksa isi file, pastikan `<?php` ada di baris pertama.
Layar putih setelah aktivasi	Ada salah ketik di `functions.php`	Ganti nama folder child lewat File Manager supaya WordPress kembali ke tema lain, lalu perbaiki file.
Perubahan CSS tidak muncul	Cache plugin atau browser	Kosongkan cache plugin dan browser, naikkan angka `Version` di `style.css`.