KURSUS MEMBUAT WEBSITE100% Gratis!

Cara Membuat Child Theme pada WordPress

Dalam artikel kali ini saya akan menjelaskan cara membuat child theme untuk keperluan memodifikasi tema pada WordPress. Panduan ini memerlukan sedikit pengetahuan css, php, dan wordpress codex.

Cara Membuat Child Theme

Apa itu Child Theme?

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

Agar lebih meng-Indonesia, selanjutnya saya akan menyebut child theme sebagai tema turunan dan parent theme sebagai tema induk.

Tema turunan dipakai untuk kepentingan memodifikasi tema induk. Dengan adanya tema turunan, semua hasil modifikasi disimpan terpisah dari tema induknya. Sehingga bila terjadi pembaruan pada pada tema induk, tidak akan berdampak pada modifikasi yang telah dibuat.

Tema turunan sangat bermanfaat bagi pengguna yang ingin memodifikasi tampilan website-nya, tetapi tidak ingin kehilangan dukungan pembaruan dari penyedia tema. Karena ketika terjadi pembaruan pada tema, kemungkinan besar akan me-replace semua berkas yang ada di dalamnya.

Tema turunan bisa dibuat sendiri dengan mudah. Berikut saya uraikan caranya.

Hal yang perlu disiapkan

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

Ada banyak aplikasi text editor yang bisa didapatkan secara gratis. Saya merekomendasikan 3 diantaranya, yaitu:

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

Mulai membuat Child Theme

Tema turunan sekurang-kurangnya terdiri dari satu berkas style.css yang disimpan dalam satu direktori. Tetapi pada umumnya terdiri dari dua berkas. Satu berkas dengan nama style.css dan satu lagi function.php.

Berkas style.css digunakan untuk menyimpan modifikasi terkait tata letak dan desain tampilan website. Sedangkan function.php digunakan 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.

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 dibuat terkait dengan tema induknya.

Contoh.

Saya akan membuat tema turunan dari salah satu tema populer bawaan WordPress, yaitu Twenty Twelve.

Dari hasil pengamatan terhadap berkas tema tersebut, saya mendapatkan nama direktorinya adalah “twentytwelve“. Maka, nama direktori untuk tema turunan yang akan saya buat adalah “twentytwelve-child“.

Langkah #2

Selanjutnya saya akan menunjukkan cara membuat berkas stylesheet.

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

Lalu, tambahkan informasi yang menerangkan tentang tema turunan. Terdapat dua informasi yang wajib dimuat dalam berkas stylesheet, yaitu:

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

Kedua informasi di atas ditulis dengan 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.

Informasi yang diberikan dalam berkas style.css di atas sangat minimalis, tapi sudah memenuhi syarat untuk sebuah tema turunan.

Bila kamu ingin memberikan informasi yang lebih lengkap, tambahkan keterangan lainnya. 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 beberapa alternatif untuk mengimpor styesheet tema induk. Salah satunya dengan menambahkan perintah @import.

Perintah tersebut diletakkan dibawah teks informasi yang telah kita buat pada berkas style.css di atas.

Namun saat ini metode di atas sudah tidak dianjurkan. Karena sering kali stylesheet tema induk dimuat dua kali. Tentu saja ini akan membuat tema menjadi lebih berat.

Sebagai gantinya, stylesheet tema induk dipanggil dari berkas function.php dengan menerapkan parameter wp_enqueue_style().

Caranya, 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 ke dalam ektensi .php dengan nama function, 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. Sedangkan untuk memodifikasi fungsi-fungsi, bisa ditambahkan pada berkas function.php.

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

Viola!

Tema turunan sudah siap diunggah ke website WordPress.

Hasil praktek dari panduan di atas bisa diunduh di sini: twentytwelve-child.zip.

Mengunggah Child Theme

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

Ada beberapa cara mengunggah tema ke website. Salah satunya lewat admin area.

Langkah-langkahnya sebagai berikut.

Masuk ke admin area WordPress, lalu pilih:

Tampilan > Tema > Tambah Baru

Akan terbuka jendela seperti gambar dibawah ini.

Unggah Child Theme

Kemudian unggah berkas twentytwelve-child.zip yang telah kita buat sebelumnya.

Setelah berhasil diunggah, lalu aktifkan.

Sekarang kamu sudah menggunakan tema turunan. Silahkan lakukan modifikasi sesukamu!

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

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

Semoga bermanfaat.

BACAAN TERKAIT
Membuat related posts Cara Membuat Related Posts Tanpa Plugin pada WordPress
Mengganti tema wordpress Cara Menginstal Tema WordPress, Panduan Bagi Pemula
PANDUAN TERBARU
BLOG TERBARU