Cara Membuat Child Theme pada WordPress

Kali ini saya akan mencoba menjelaskan cara membuat child theme pada WordPress. Sedikit pengetahuan bahasa pemrograman dan wordpress codex akan sangat membantu.

Apa itu Child Theme?

Child theme adalah tema yang mewarisi semua fungsi parent theme sebagai tema utama yang digunakan dalam website WordPress.

Selanjutnya saya akan menyebut child theme sebagai tema turunan dan parent theme sebagai tema induk.

Tema turunan berguna untuk memodifikasi tema induk. Kamu cukup memodifikasi tema turunan untuk melakukan perubahan pada tema induk.

Mengapa harus begitu?

Hampir semua pembuat tema memberikan layanan pembaruan secara periodik. Pembaruan tema biasanya terkait dengan masalah keamanan atau penambahan fitur-fitur baru.

Ada banyak kerugian bila pengguna WordPress tidak mengikuti pembaruan tema. Salah satunya membuka peluang munculnya celah keamanan yang membahayakan website.

Masalahnya, setiap aksi pembaruan akan mengganti berkas lama dengan berkas baru yang dibuat pengembang. Tentu saja proses tersebut akan menghapus hasil modifikasi pada tema.

Untuk menjawab permasalahan tersebut, pengembang WordPress menciptakan tema turunan. Tujuannya agar pengguna tetap bisa memodifikasi tema tanpa kehilangan hasil modifikasi ketika terjadi pembaruan.

Kamu bisa membuat sendiri tema turunan dengan mudah. Saya akan menjelaskan caranya, langkah demi langkah.

Menyiapkan alat kerja

Alat yang diperlukan untuk membuat tema turunan adalah aplikasi text editor yang memiliki kemampuan menyimpan berkas berekstensi .php dan .css.

Kamu bisa mendapatkan aplikasi text editor secara gratis. Sebenarnya ada banyak, tapi untuk cepatnya saya merekomendasikan 3 aplikasi berikut:

• Notepad++
• Sublimtext
• Bluefish

Silahkan unduh dan instal salah satu text editor tersebut di komputer kamu.

Mulai membuat Child Theme

Tema turunan sekurang-kurangnya terdiri dari satu berkas, yaitu style.css yang disimpan dalam satu direktori. Tetapi pada umumnya terdiri dari dua berkas, dengan menambahkan berkas function.php.

Berkas style.css berguna untuk menyimpan modifikasi terkait tata letak dan desain tampilan website. Sedangkan function.php berguna untuk menyimpan fungsi-fungsi tambahan.

Untuk kepentingan modifikasi yang lebih komplek, biasanya tema turunan menyertakan juga berkas single.php, archive.php, footer.php, dan seterusnya sesuai kebutuhan.

Pada kesempatan kali ini saya akan membuat tema turunan yang terdiri dari dua berkas saja, yaitu style.css dan function.php.

Langkah #1

Buat direktori pada komputer kamu dengan nama “terserah kamu”. Penamaan direktori tidak boleh menggunakan spasi. Gunakan tanda hubung strip ( – ) atau underscore ( _ ) untuk merangkai antar kata.

Pada umumnya nama direktori tema turunan terdiri dari nama direktori tema induk ditambah akhiran “-child“. Penamaan seperti di atas bertujuan untuk mengingatkan bahwa tema turunan tersebut terkait dengan tema induknya.

Contoh, saya akan membuat tema turunan dari tema Twenty Twelve bawaan WordPress.

Nama direktori tema Twenty Twelve adalah “twentytwelve“. Maka, nama direktori untuk tema turunan yang akan saya buat adalah “twentytwelve-child“.

Langkah #2

Selanjutnya buat berkas style.css.

Buka new file pada text editor yang telah kamu instal pada komputer.

Lalu tambahkan informasi yang menerangkan tentang identitas tema turunan. Terdapat dua informasi wajib dalam berkas style.css, yaitu:

• Theme Name, menerangkan nama tema turunan. Di sini akan saya namakan “Twenty Twelve Child“.
• Template, menerangkan nama direktori dari tema induk. Pada tema Twenty Twelve nama direktorinya adalah “twentytwelve“.

Tuliskan dua informasi tersebut dalam format sebagai berikut:

/*
 Theme Name:   Twenty Twelve Child
 Template:     twentywelve
*/

Salin dan tempelkan potongan kode di atas pada text editor. Kemudian simpan berkas stylesheet tersebut dengan nama “style” dalam format berekstensi .css, sehingga nama berkasnya menjadi style.css.

Dua informasi tersebut sudah memenuhi syarat untuk sebuah tema turunan.

Namun bila kamu ingin memberikan informasi yang lebih lengkap bisa menambahkan keterangan lain. Contoh informasi tema yang lebih lengkap adalah sebagai berikut:

/*
 Theme Name:   Twenty Twelve Child
 Theme URI:    http://example.com
 Description:  Twenty Twelve Child Theme
 Author:       Mang Udel
 Author URI:   http://example.com
 Template:     twentytwelve
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, responsive-layout
 Text Domain:  twentytwelvechild
*/

Langkah #3

Langkah selanjutnya mengimpor seluruh stylesheet dari tema induk ke tema turunan. Ada beberpa alternatif untuk mengimpor styesheet ke tema induk.

Saya hanya akan menjelaskan salah satu metode yang paling efektif. Caranya dengan memanggil stylesheet tema induk dari berkas function.php tema turunan dengan menerapkan parameter wp_enqueue_style().

Langkahnya, buka text editor kemudian salin dan tempelkan kode berikut:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

?>

Lalu simpan berkas tersebut dengan nama function berekstensi .php, sehingga nama berkasnya menjadi function.php.

Sekarang kita punya dua berkas dalam direktori “twentytwelve-child“, yakni berkas style.css dan berkas function.php.

Dua berkas tersebut sudah memenuhi syarat untuk sebuah tema turunan.

Kamu bisa menambahkan modifikasi terkait css pada berkas style.css dan memodifikasi fungsi-fungsi pada berkas function.php.

Selanjutnya, kompres direktori twentytwelve-child dalam format .zip sehingga menjadi berkas twentytwelve-child.zip.

Viola..!

Tema turunan untuk Twenty Twelve sudah jadi. Kamu bisa mengunggahnya ke website WordPress.

Untuk memodifikasi tema induk lewat tema turunan, pelajari terlebih dahulu struktur dan detail dari tema induk.

Saya lampirkan hasil praktek di atas dalam bentuk child theme yang sudah jadi, unduh berkasnya di sini.

Cara mengunggah Child Theme

Tema turunan sudah jadi, selanjutnya saya akan menunjukkan cara mengunggahnya ke website WordPress kamu.

Ada beberapa cara mengunggah tema WordPress, baca di sini cara memasang tema WordPress.

Salah satu cara paling praktis untuk mengunggah tema lewat admin area, seperti berikut ini.

Masuk ke admin area WordPress, lalu pilih:

Tampilan > Tema > Tambah Baru

Akan terbuka jendela seperti gambar dibawah ini.

Kemudian unggah berkas tema turunan, dalam hal ini twentytwelve-child.zip. Lalu aktifkan!

Tema turunan ini mewarisi berbagai fitur dari tema induknya dalam hal ini Twenty Twelve. Jadi, pastikan kamu tidak menghapus tema induknya dari direktori tema.

Sekarang kamu sudah menggunakan tema turunan. Silahkan lakukan modifikasi sesukamu pada berkas tema turunan tersebut. Tak perlu khawatir proses modifikasi terhapus bila ada pembaruan tema.

Demikian uraian saya tentang cara membuat child theme sendiri. Bila ada yang tidak jelas atau ingin menambahkan, gunakan kolom komentar di bawah.

Semoga bermanfaat.