Home / WordPress / Apa Itu Child Theme WordPress, Bagaimana Cara Membuatnya Secara Manual?

Apa Itu Child Theme WordPress, Bagaimana Cara Membuatnya Secara Manual?

Pengertian Dan Cara Membuat Child Theme WordPress – WordPress adalah platform yang sangat kaya akan fitur. Tak heran jika banyak website dan blog di dunia yang menggunakan Content Management System (CMS) WordPress sebagai dasar softwarenya. WordPress juga dikenal dengan banyaknya dukungan dari para developer handal di dunia untuk lebih mengembangkan lagi CMS WordPress. Terbukti dengan hadirnya ratusan plugin dan template yang bisa kita dapatkan secara gratis dan berbayar. Dengan begitu tidak diragukan lagi dengan kelengkapan amunisi website dan blog jika CMS yang kita pilih adalah WordPress.

Baca Juga : Resiko Menggunakan Theme & Plugin WordPress Nulled Bagi Kelangsungan Blog

Namun walaupun begitu adakalanya kita merasa tidak puas dengan tampilan template yang kita gunakan. Terlebih jika template tersebut kita dapatkan secara gratis yang tentunya akan jauh kelengkapan fiturnya dibanding dengan template berbayar. Terutama tampilan template gratis biasanya akan terlihat kurang menarik dibanding theme premium sehingga kita perlu melakukan kustomisasi lagi agar lebih cocok dengan kemaun kita. Tapi tidak menutup kemungkinan juga jika theme berbayar harus kita ubah lagi tampilannya.

Pengertian Dan Cara Membuat Child Theme WordPress (1)

Sebelum kita mengubah tampilan theme WordPress sebaiknya kita pikirkan dulu bagaimana jika nanti ada pemberitahuan harus update (memperbarui) template? Karena tidak sedikit depelover theme akan memberitahu kita untuk upgrade theme jika memang sudah ada fitur terbarunya. Notifikasi upgrade theme ini tidak hanya untuk theme berbayar saja, karena theme gratispun diantaranya ada yang harus upgrade secara berkala contohnya theme POINT dari MyThemeShop.

Anda mungkin sudah menyadarinya jika sebelumnya kita sudah pernah melakukan perubahan pada template seperti mengubah warna header, mengubah jenis huruf, dan sebagainya maka ketika template di upgrade tampilan template akan kembali ke tampilan semula (default). Tentunya itu adalah sebuah perjuangan yang sia-sia bukan?

Apakah sekalian saja jangan melakukan upgrade template?

Mungkin sekilas kita akan menjawab seperti itu bahwa mending sekalian jangan upgrade theme ketika ada notifikasi update dari developer theme. Jawaban itu saya rasa kurang tepat. Banyak kerugiannya jika kita tidak upgrade theme, seperti kita akan tidak tahu fitur terbaru dari template yang kita gunakan. Bahkan upgrade theme termasuk untuk meningkatkan keamanan blog kita.

Upgrade di WordPress seperti upgrade CMS WordPress, upgrade theme, dan upgrade plugin itu wajib dilakukan tidak ada alasan lagi.

Lalu bagaimana dengan solusi agar ketika upgrade theme tampilan template yang sebelumnya pernah kita ubah tidak menjadi ke tampilan semula? Disinilah saya akan memberikan solusi terbaiknya dan sudah saya buktikan ternyata manjur.

Solusinya adalah dengan membuat Child Theme.

Apa Itu Child Theme WordPress?

Apa itu Child Theme? Jika dilihat kosakatanya ‘child’ berarti ‘anak’ maka kalau Child Theme adalah anak theme/tema/template. Dengan kata lain Child Theme adalah yang memungkinkan kita untuk mengubah tampilan theme tanpa harus mengubah kode asli dari theme itu sendiri. Ketika website atau blog dijalankan maka tidak akan mengeksekusi kode dari theme induk namun dari Child Theme.

Disini akan dibahas “cara membuat Child Theme” dan “cara menggunakan Child Theme”. Jadi silakan Anda simak artikelnya sampai selesai.

Child Theme yang kita buat nanti akan ditempatkan sama dengan theme induk (Parent Theme). Jadi bukan kita tempatkan didalam Parent Theme, lihat skema berikut :

Pengertian Dan Cara Membuat Child Theme WordPress (2)

Bagaimana Cara Membuat Child Theme WordPress Dan Cara Menggunakannya?

Ok kita mulai saja tutorial cara membuat Child Themenya. Pada dasarnya dalam membuat Child Theme hanya ada satu elemen penting saja yang harus kita buat yaitu style.css. Didalam style.css ini kita sering otak-otik tampilan theme seperti mengubah warna huruf, mengubah background, mengubah tampilan gambar, dan sebagainya. Untuk elemen-elemen lainya sementara kita biarkan dulu.

Langkah awal …

Kita ketahui dulu apa nama theme yang kita gunakan saat ini atau Parent Theme (Tema Induk), sebagai contoh theme yang saya gunakan sekarang adalah point dari MyThemeShop. Kemudian kita harus memikirkan nama template yang akan kita buat sebagai Child Theme, misal template selingkuhan.

Ok Parent Theme point dan Child Theme adalah template selingkuhan

Buat folder baru di komputer dan terserah letaknya di drive mana karena ini hanya konsep dengan nama Child Theme yang sudah kita siapkan yaitu template selingkuhan. Kemudian buat file baru dengan Notepad beri nama style.css (biarkan isinya kosong dulu). Anda masukkan file tersebut kedalam folder yang tadi telah dibuat.

Saatnya mengatur style.css …

Anda buka file yang tadi telah dibuat di Notepad dengan nama style.css kemudian isikan kode berikut didalamnya :

/*
 Theme Name: Template Selingkuhan
 Theme URI: http://info-menarik.net/
 Description: Ini adalah template selingkuhan pertama saya dan mungkin juga untuk yang terakhir sampai kapanpun.
 Author: Cep Iwan Setiawan
 Author URI: http: //info-menarik.net/about/
 Template: point
 Version: 0.0.1
 */

Maksud dari kode diatas adalah sebagai berikut :

  1. Theme Name: = (wajib) Nama dari Child Theme Anda;
  2. Theme URI: = (pilihan) URL website atau blog Anda yang akan dipasang Child Theme;
  3. Description: = (pilihan) Diskripsi Child Theme, silakan kreasikan lagi;
  4. Author URI: = (pilihan) URL Author webiste atau blog Anda;
  5. Author: = (pilihan) Nama Anda;
  6. Template: = (wajib) Nama folder Parent Theme atau Theme Induk (case-sensitive);
  7. Version: = (pilihan) Versi Child Theme yang Anda buat sekarang.

Pada nama template Parent Theme itu wajib Anda isi dan memang itu adalah bersifat case-sensitive artinya Anda harus memperhatikan juga penulisan huruf kapital atau huruf kecilnya. Biasanya nama template ditulis tanpa spasi, misal penulisan point tentu berbeda dengan Point atau POINT.

Kemudian Anda pasang kode berikut dibawahnya :

@import url("../point/style.css");

Sesuaikan nama point dengan nama Parent Theme yang Anda gunakan ….

Setelah menempatkan kode diatas dan melakukan perubahan seperlunya kemudian Anda sekarang perlu mengimport seluruh kode style.css dari Parent Theme kedalam style.css Child Theme.

Silakan sekarang Anda berkreasi sepuasnya bagian template mana yang akan diubah sesuai dengan selera Anda. Contoh kongkritnya nanti isi style.css Child Theme akan tampak seperti ini :

/*
 Theme Name: Template Selingkuhan
 Theme URI: http://info-menarik.net/
 Description: Ini adalah template selingkuhan pertama saya dan mungkin juga untuk yang terakhir sampai kapanpun.
 Author: Cep Iwan Setiawan
 Author URI: http: //info-menarik.net/about/
 Template: point
 Version: 0.0.1
 */
 @import url("../point/style.css");
 /*-[ Mulailah berkreasi dari sini ]-----------------------*/

Mengatur File dan Folder Lainnya …

Lalu bagaimana jika sebelumnya kita pernah mengubah atau menambahkan kode tertentu pada file dan folder lainnya didalam folder theme? Apakah ketika upgrade template akan hilang juga? Jawabannya tentu saja …

Misal kita pernah menambahkan kode tertentu didalam file functions.php seperti kode Custom CSS WidgetMenghapus Auto Link KomentarMembatasi Jumlah Karakter Komentar, dan sebagainya. Maka kitapun harus membuat file functions.php yang ditempatkan didalam Child Theme.

Dalam membuat file functions.php berbeda dengan membuat file style.css. Buat file functions.php dengan Notepad kemudian isi dengan kode-kode tertentu saja yang ingin Anda tambahkan, artinya tidak semua kode yang ada didalam Parent Theme dimasukkan kedalam Child Theme.

Namun sebelum menempatkan kode tertentu yang ditambahkan kedalam file functions.php, diawali dengan kode <?php dan diakhiri dengan kode ?>. Misal kita ingin menambahkan kode Custom CSS Widget dan kode Membatasi Jumlah Karakter Komentar maka contoh kongkritnya akan seperti ini :

<?php
/*---------------------------------------------------------------*/ 
/* Membatasi Jumlah Karakter Komentar
/*---------------------------------------------------------------*/ 
add_filter( 'preprocess_comment', 'wpb_preprocess_comment' );
function wpb_preprocess_comment($comment) {
if ( strlen( $comment['comment_content'] ) > 2000 ) {
wp_die('Komentar terlalu panjang. Harap ketik komentar di bawah 2000 karakter.');
 }
if ( strlen( $comment['comment_content'] ) < 100 ) {
wp_die('Komentar terlalu pendek. Silakan gunakan setidaknya 100 karakter.');
 }
 return $comment;
}
/*---------------------------------------------------------------*/ 
/* Menonaktifkan Emoji
/*---------------------------------------------------------------*/ 
remove_action ('wp_head', 'print_emoji_detection_script', 7);
remove_action ('wp_print_styles', 'print_emoji_styles');
?>

Sedangkan untuk file-file lainnya seperti comments.php, archive.php, header.php, footer.php, single.php, sidebar.php, dan sebagainya kecuali functions.php maka ketika kita ingin melakukan perubahan didalamnya harus semua kode dalam file-file tersebut diimport kedalam Child Theme kemudian lakukan perubahan semestinya seperti mengubah pada file style.css.

Pertanyaan sekarang bagaimana untuk folder-folder tertentu seperti folder images dan folder font? Seperti kita telah menambahkan Gambar Default Avatar dan ditempatkan didalam folder images. Silakan Anda copy paste juga folder images yang ada didalam Parent Theme kedalam Child Theme.

Begitupun juga jika Anda telah menggunakan Font Face untuk desain Typograpy tampilan template maka inipun sama copy paste juga folder font di Parent Theme kedalam folder Child Theme. Karena nanti Child Theme akan mengeksekusi seluruh file yang ada didalam folder Child Theme saja.

Agar Child Theme yang kita buat lebih keren lagi, silakan tambahkan juga gambar screenshot. Biasanya file format screenshot ini adalah format .png dan memiliki ukuran 880 x 660 pixels.

Saatnya upload Child Theme …

Sekarang saya anggap Anda sudah berhasil membuat template Child Theme dengan nama Template Selingkuhan yang didalamnya terdapat file style.css, screenshot, file lainnya, dan folder lainnya. Kemudian anda ubah atau kompress folder Child Theme menjadi zip file menggunakan software kompressi seperti WinRAR. Kemudian Anda upload template baru Child Theme bisa melalui cPanel atau wp-admin dashboard. Nanti setelah upload sukses Anda tinggal aktifkan Chil Theme dari Appearance > Themes.

Selengkapnya pembahasan tentang Child Theme ini bisa dilihat dihalaman resmi WordPress.org. Ok mungkin pembahasan tentang Cara Membuat Child Theme WordPress Secara Manual dicukupkan sekian saja. Semoga artikel ini ada manfaatnya dan jika Anda mempunyai pendapat lain silakan disampaikan di kotak komentar saja. Salam sukses.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

9 comments

  1. gan kenapa file seperti comments.php, archive.php, header.php, footer.php, single.php, sidebar.php,dll harus ikut di copy juga ? kalo gitu mending theme yang ada di upload ulang dengan nama yang beda ?

    • Kesemuanya itu kalau memang didalamnya telah diubah struktur themenya mas, dan kalau didalamnya tidak diubah sedikitpun maka tidak perlu dicopas.

      • terakhir mas hehe,,apa semua theme wordpress pada dasarnya bisa di buat child theme ?, saya kemarin coba bikin child theme dari POINT yg masih ori belum diubah strukturnya, dengan file functions.php hanya dan style.css pakai format artikel ini, tapi waktu aktifkan child theme dari POINT tapi ko malah acak2kan ?

        • Pada dasarnya semua theme bisa dibuat child theme, tergantung kitanya apakah paham dengan struktur kode dari theme itu sendiri atau tidak. Karena biasanya struktur kode setiap theme berbeda.

  2. Salam..

    hatur tengkyu master…setelah keliling dari sabang sampai merauke akhirnya nemu disini yang penjelasanya bisa di mengerti..
    terima ksaih banyak .. mau di coba dulu ya..

    oh iya saya mau nanya kalau di localhost childtheme bisa jalan ga ya? maklum pemula buat uji coba dulu taku gagal he he he.. makasih

  3. Sudah bisa sih buat child theme nya. Cuma aku masih bingunggul maklum baru main wp. Biasa pake blogspot.
    Mau tanya mas, cara nge update child theme itu sendiri gimana ya atau ada referensi artikel nya mas?
    Sama sekali belum paham ni. Krn theme yg aku pake selalu update.

    Udah coba edit di parent theme tapi yahh benar kata mas pas update theme nya yg kita edit berubah.

    • Ya itu dia mas tujuan utamanya membuat child theme itu adalah menghindari perubahan theme ketika ada versi terbarunya. Child theme ga perlu diupdate karena child theme kita buat secara manual!

  4. Kalau data “Template:” sudah diisi sesuai dengan nama parent theme, kenapa harus pakai “@import” lagi? Bukannya malah tambah berat loading ya?

Leave a Reply

Your email address will not be published. Required fields are marked *