Cara Membuat Child Theme di WordPress: 5 Langkah Aman Ubah Tampilan Tanpa Takut Hilang Saat Update

Pernahkah Anda mengubah warna tombol, ukuran huruf, atau tata letak website WordPress, lalu semua perubahan itu lenyap begitu tema diperbarui? Kejadian ini sangat umum, dan sering membuat pemilik website harus mengulang pekerjaan dari awal. Padahal, ada cara yang jauh lebih aman untuk mengubah tampilan tanpa mengorbankan hasil kerja Anda setiap kali ada pembaruan tema.

Solusinya bernama child theme. Sederhananya, child theme adalah tema turunan yang menumpang pada tema utama Anda, yang disebut tema induk. Tema turunan ini mewarisi seluruh desain dan fungsi tema induk, tetapi menyimpan semua perubahan Anda di tempat yang terpisah. Ketika tema induk diperbarui, berkas-berkasnya memang diganti dengan versi baru, namun berkas child theme Anda tidak ikut tersentuh sehingga kustomisasi tetap bertahan.

Bagi pemilik usaha kecil, manfaat ini sangat nyata. Bayangkan toko online yang mengubah warna tombol beli menjadi hijau khas mereknya. Tanpa child theme, pembaruan tema bisa menghapus perubahan itu dalam sekejap. Dengan child theme, tombol tersebut tetap tampil seperti semula setelah pembaruan selesai. Artikel ini memandu Anda membuatnya dalam lima langkah yang aman, bahkan jika Anda baru pertama kali menyentuh berkas tema.

Langkah 1: Cadangkan Website dan Kenali Tema Induk Anda

Sebelum mengubah apa pun, buat cadangan website Anda, meliputi berkas dan basis data. Cadangan adalah jaring pengaman: jika ada kesalahan, Anda bisa memulihkan website ke kondisi sebelumnya. Banyak layanan hosting menyediakan tombol cadangan sekali klik, dan Anda juga bisa memakai plugin cadangan tepercaya.

Selanjutnya, catat nama tema induk yang sedang aktif. Masuk ke dasbor WordPress, buka menu Tampilan, lalu pilih Tema. Yang lebih penting lagi adalah nama foldernya, karena nama folder inilah yang nanti ditulis di dalam child theme. Untuk melihatnya, buka pengelola berkas di panel hosting atau aplikasi FTP, lalu masuk ke folder wp-content/themes. Tulis nama folder itu persis sama, termasuk huruf besar dan kecilnya, karena satu huruf yang meleset saja bisa membuat child theme tidak dikenali.

Langkah 2: Buat Folder Child Theme dan Berkas style.css

Di dalam folder wp-content/themes, buat folder baru dengan pola nama tema induk ditambah akhiran -child. Jika tema induk Anda bernama astra, folder barunya menjadi astra-child. Pola ini bukan aturan wajib dari WordPress, tetapi kebiasaan yang membuat struktur website mudah dipahami siapa pun yang mengelolanya kelak, termasuk pengembang lain.

Di dalam folder baru itu, buat berkas bernama style.css. Berkas ini wajib ada karena di bagian atasnya terdapat keterangan yang memberi tahu WordPress bahwa folder ini adalah child theme dan tema induk mana yang diikutinya. Tulis keterangan berikut, lalu sesuaikan dengan milik Anda:

Theme Name: Astra Child

Template: astra

Version: 1.0.0

Baris yang paling menentukan adalah Template. Baris ini harus berisi nama folder tema induk dengan tepat, bukan nama tampilan tema di dasbor. Jika Anda menulis Template: Astra padahal foldernya bernama astra, WordPress akan menganggap tema induknya tidak ditemukan. Untuk saat ini, biarkan bagian gaya kustom kosong dulu agar Anda bisa memastikan child theme bekerja sebelum menambahkan perubahan apa pun.

Langkah 3: Buat Berkas functions.php untuk Memuat Gaya Tema Induk

Banyak pemula mengira style.css saja sudah cukup, padahal ada satu berkas lagi yang sama pentingnya, yaitu functions.php. Berkas ini bertugas memberi tahu WordPress agar memuat lembar gaya tema induk terlebih dahulu, baru kemudian lembar gaya child theme Anda. Tanpa langkah ini, website Anda bisa tampil berantakan karena hanya gaya child theme yang dimuat, sementara gaya utama tema induk tidak ikut terpanggil.

Buat berkas functions.php di folder child theme yang sama, lalu isi dengan perintah berikut:

add_action( 'wp_enqueue_scripts', 'muat_gaya_tema_anak' );

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

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

Secara sederhana, perintah pertama mendaftarkan fungsi pemuatan gaya pada momen yang tepat saat WordPress menyiapkan halaman. Perintah kedua mengambil lembar gaya tema induk, sedangkan perintah ketiga mengambil lembar gaya child theme dan menegaskan bahwa ia harus dimuat sesudah gaya induk. Urutan ini penting karena gaya yang dimuat belakangan berhak menimpa gaya sebelumnya. Berkat urutan tersebut, perubahan warna atau huruf yang Anda tulis di child theme akan menang atas gaya bawaan tema induk.

Perlu diingat, functions.php di child theme tidak menggantikan berkas yang sama di tema induk; WordPress memuat keduanya, dengan berkas child theme dimuat lebih dulu. Karena itu, jangan menyalin seluruh isi berkas induk. Cukup tambahkan fungsi yang memang Anda perlukan, dan beri komentar singkat pada setiap fungsi agar mudah diingat kelak.

Langkah 4: Aktifkan Child Theme dan Periksa Tampilan Website

Setelah kedua berkas selesai, kembali ke dasbor WordPress dan buka Tampilan, lalu Tema. Child theme Anda kini seharusnya muncul di daftar tema, dengan nama yang Anda tulis di style.css. Klik tombol Aktifkan pada child theme tersebut. Jangan khawatir, tampilan website tidak akan berubah drastis karena child theme mewarisi seluruh desain tema induk.

Selanjutnya, buka website Anda di jendela penyamaran peramban agar Anda melihat tampilan sebagaimana dilihat pengunjung. Periksa halaman beranda, satu halaman produk atau artikel, serta tampilan di ponsel. Jika semuanya tampak sama seperti sebelum aktivasi, berarti child theme Anda bekerja dengan benar. Jika tampilan justru rusak atau kosong, kemungkinan besar ada dua penyebabnya: nama pada baris Template tidak cocok dengan nama folder tema induk, atau functions.php belum memuat gaya induk dengan benar. Perbaiki kedua hal itu, lalu muat ulang halaman.

Apabila Anda masih ragu, Anda bisa kembali ke tema induk kapan saja dari menu yang sama, karena tema induk yang asli tetap utuh dan siap dipakai lagi.

Langkah 5: Pindahkan Kustomisasi Lama dan Uji dengan Pembaruan

Child theme baru bermanfaat penuh setelah kustomisasi Anda pindah ke dalamnya. Mulailah dari perubahan gaya yang paling berdampak bagi bisnis Anda. Contohnya, toko online tadi bisa menulis aturan warna tombol di style.css child theme, seperti tombol beli berwarna hijau dan tombol promo berwarna jingga, lengkap dengan warna saat kursor diarahkan ke tombol. Lakukan satu perubahan dalam satu waktu, lalu periksa hasilnya di website sebelum lanjut ke perubahan berikutnya. Cara bertahap ini membuat Anda mudah menemukan sumber masalah jika ada tampilan yang tiba-tiba tidak sesuai harapan.

Untuk perubahan yang lebih dalam, misalnya mengubah susunan header atau menambahkan keterangan di halaman produk, Anda bisa menyalin berkas templat terkait dari tema induk ke folder child theme, lalu mengubah salinannya. WordPress akan memakai berkas di child theme. Namun, salinlah hanya berkas yang benar-benar Anda ubah; menyalin semuanya justru merugikan karena salinan lama itu tidak ikut diperbarui saat tema induk mendapat perbaikan.

Terakhir, biasakan menguji pembaruan tema induk di luar jam sibuk, dan periksa kembali halaman penting setelah pembaruan selesai. Jika kustomisasi Anda tersimpan di child theme, pembaruan seharusnya berjalan mulus. Jika tema induk merombak templat yang Anda salin, Anda cukup menyesuaikan salinan di child theme tanpa membangun ulang seluruh kustomisasi.

Kesimpulan

Child theme adalah cara paling aman untuk mengubah tampilan WordPress tanpa takut kehilangan hasil kerja saat tema diperbarui. Kuncinya ada pada lima langkah sederhana: mencadangkan website dan mengenali tema induk, membuat folder child theme beserta style.css yang menunjuk ke tema induk dengan tepat, menambahkan functions.php yang memuat gaya induk sebelum gaya turunan, mengaktifkan child theme dan memeriksa tampilan, lalu memindahkan kustomisasi secara bertahap dan menguji pembaruan.

Bagi pemilik website dan pelaku UMKM, waktu yang Anda luangkan untuk menyiapkan child theme akan menghemat banyak waktu, biaya, dan rasa frustrasi di masa depan. Mulailah dari satu perubahan kecil, misalnya warna tombol utama, dan rasakan sendiri betapa tenangnya memperbarui tema ketika kustomisasi Anda tersimpan aman di tempatnya sendiri.