Cara Membuat Child Theme di WordPress

Salah satu kegunaan child theme atau tema anak WordPress yaitu pada saat melakukan perubahan tema WordPress, yang di modifikasi hanya pada tema anak dan bukan tema induk (parent theme). Sehingga dapat disimpulkan, child theme membuat aman pemilik situs web melakukan pembaharuan terhadap tema WordPress.

Child theme adalah tema WordPress yang mewarisi fungsionalitas, fitur, dan gaya tema WordPress lain, tema induk.

Selain itu, dengan child theme merupakan cara terbaik untuk menyesuaikan tema WordPress karena menghemat waktu dan tenaga. Parent theme sudah berisi banyak pemformatan dan fungsionalitas, jadi tidak perlu membuat kode semuanya dari awal.

Bahkan, child theme yang Anda miliki sekarang bisa juga diterapkan atau digunakan pada situs WordPress lain.

Membuat Child Theme Sederhana (Pemula)

Dimulai dengan membuat child theme secara manual yakni menambah folder dan file yang dibutuhkan, Anda juga dapat membuat child theme menggunakan plugin.

Metode manual sangat membantu karena akan menjadikan Anda terbiasa dengan file yang perlu dikerjakan nanti di tutorial. Metode plugin dapat digunakan jika kesulitan membuat file-file tersebut.

Hanya perlu menggunakan satu metode, dan kemudian dapat beralih ke metode yang ada dibawah ini;

Metode 1: Membuat Child Theme Menggunakan Kode

Pergi ke /wp-content/themes/ di folder instalasi WordPress dan membuat folder baru untuk child theme. Berilah nama folder sesuai keinginan. Untuk tutorial ini, nama folder ag0_aga-child.

Selanjutnya, membuat dua file pertama untuk child theme. Buka dengan text editor, kemudian tempelkan kode berikut ke dalamnya;

Theme Name:   AGOAGA Child
Theme URI:    https://www.agoaga.com/
Description:  A Twenty Twenty-One child theme 
Author:       AGOAGA
Author URI:   https://www.agoaga.com
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild

Kode ini berisi informasi tentang tema anak, ubah sesuai kebutuhan lalu simpan sebagai style.css di folder child theme yang baru dibuat tadi. Ini adalah stylesheet utama child theme Anda.

Berikutnya adalah membuat file kedua yang akan mengimpor, atau mengantrekan, stylesheet dari tema induk. Untuk melakukannya, buat dokumen atau file baru di text editor dan salin kode berikut;

/* enqueue scripts and style from parent theme */
    
function twentytwentyone_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
    array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Simpan kode diatas ini sebagai file functions.php di folder child theme. Yang nantinya akan ada penambahan fungsionalitas ke child theme itu sendiri.

Kode diatas ini akan berfungsi saat menggunakan Twenty Twenty-One sebagai tema induk. Jika menggunakan tema induk yang berbeda, maka perlu menggunakan kode yang berbeda pula.

Jika mengalami kesulitan mengubah kode untuk tema induk yang berbeda, sangat dimungkinkan penggunaan plugin.

Perlu diingat: Sebelumnya, cara impor tema induk menggunakan perintah @import di style.css. Dan metode ini sebenarnya tidak direkomendasikan lagi karena akan menambah jumlah waktu yang dibutuhkan untuk memuat style sheet.

Nah, child theme yang sangat mendasar sudah Anda dibuatkan. Navigasi ke Appearance » Themes, maka terlihat AGOAGA Child. Untuk menggunakan child theme tersebut, klik tombol Activate.

Jika belum mengubah child theme, situs website akan menggunakan fungsionalitas dan tampilan tema induknya. Lanjutkan ke bagian berikutnya untuk menyesuaikan child theme.

Metode 2: Dengan Menggunakan Plugin

Plugin ‘Child Theme Configurator’ merupakan plugin WordPress yang mudah dalam penggunaannya, dimungkinkan membuat dan menyesuaikan child theme dengan cepat tanpa menggunakan kode.

Cukup menginstal dan mengaktifkan plugin Child Theme Configurator. Untuk detailnya, lihat panduan cara memasang plugin WordPress.

Kemudian lakukan aktivasi, navigasikan ke Tools » Child Themes di dasbor WordPress.

Pada tab Parent/Child, diminta untuk memilih tema induk dari menu drop-down. Yang dipilih adalah tema Twenty Twenty-One.

Setelah tombol Analyze di klik, maka plugin akan memastikan tema tersebut cocok untuk digunakan sebagai tema induk. Twenty Twenty-One is OK.

Berikutnya wajib memberi nama folder sebagai tempat child theme akan disimpan dan memilih tempat untuk menyimpan style.css. Dan meninggalkan pengaturan default.

Di bagian berikut, Anda akan diminta untuk memilih bagaimana stylesheet tema induk akan diakses. Sekali lagi, kita akan pergi dengan pengaturan default.

Saat masuk ke Bagian 7, klik tombol ‘Click to Edit Child Theme Attributes’. Dan isilah detail child theme.

Hal yang terjadi ketika membuat child theme secara manual, maka Anda akan kehilangan menu dan widget parent theme. Child Theme Configuratator dapat menyalinnya dari parent theme ke child theme. Centang kotak Bagian 8 jika ingin melakukan ini.

Terakhir, klik tombol untuk membuat child theme. Plugin akan membuatkan folder untuk itu serta menambahkan file style.css dan functions.php yang nantinya digunakan untuk menyesuaikan tema.

Sebelum mengaktifkan tema, klik terlebih dahulu tautan di dekat bagian atas layar untuk melihat pratinjau dan memastikan terlihat bagus dan tidak merusak situs web.

Dan jika semuanya tampak berfungsi, klik tombol Activate & Publish dan child theme pun ditayangkan.

Sampai tahap ini, child theme terlihat dan tampil persis seperti tema induk. Selanjutnya, kita melakukan penyesuaian.