Cara membuat Child Theme sendiri

Child theme adalah tema yang di buat dari tema induk nya dalam arti lain tema yang mewarisi fungsi-fungsi yang ada pada tema utama. Dengan cara membuat child theme, kita akan lebih mudah dalam memodifikasi tema.

Child Theme juga memungkinkan kita untuk membuat desain yang berbeda dengan tema utamanya, dengan cara menambahan style atau fungsi-fungsi yang kita butuhkan saja tanpa harus merubah semua struktur tema nya.

Mengapa menggunakan Child Theme?

Mungkin alasan ini akan menjadi suatu pertanyaan bagi seseorang yang belum mengerti tentang Child Theme.

Seperti yang di jelaskan pada wordpress.org. Ada beberapa alasan mengapa kita menggunakan Child Theme:

• Jika kita mengubah atau memodifikasi tema langsung di dalam tema utama dan ketika ada pembaruan pada tema tersebut lalu kita memperbarui tema tersebut, maka modifikasi kita mungkin akan hilang. Dengan menggunakan Child Theme kita akan lebih aman dan tidak takut kehilangan hasil modifikasi tema kita walaupun tema utama diperbarui.
• Menggunakan Child Theme dapat mempercepat waktu pengembangan.
• MenggunakanChild Theme adalah cara yang baik untuk belajar tentang pembuatan tema WordPress.

Bagaimana cara membuat Child Theme?

Membuat child theme tidak begitu rumit, kita hanya perlu beberapa kode tambahan untuk membangunya. Hal yang perlu ada dalam pembuatan child theme yaitu: satu direktori untuku child theme, file style.css dan file functions.php. Ini adalah hal yang paling penting untuk membuat child theme. Berikut adalah cara membuat child theme:

Membuat direktori untuk child theme

Membuat direktori yang akan dijadikan sebagai direktori child theme. Anda bisa menamainya sesuai keinginan Anda. Misal pada contoh ini saya akan membuat child theme dari tema utama yaitu Twenty Sixteen.

Seperti contoh pada gambar di atas, saya beri nama twentysixteen-child. Anda bisa memberikan nama sesuai keinginan Anda.

Membuat stylesheet

Pada direktori child theme yang sudah kita buat tadi, buat file baru yaitu: style.css.

Setelah di buat, kita tambahkan stylesheet di dalama file style.css. Seperti pada contoh ini:

/*
 Theme Name:   Twenty sixteen Child
 Theme URI:    http://example.com/twenty-sixteen-child/
 Description:  Twenty sixteen Child Theme
 Author:       OptimasiWP
 Author URI:   http://masgani.com
 Template:     twentysixeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-sixteen-child
*/

Keterangan :

• Theme Name adalah nama tema kita nanti, silahkan diganti sesuai nama tema yang akan Anda buat.
• Theme URI adalah alamat url direktori tempat penyimpanan tema Anda. Anda bisa menghapus saja bagian ini jika tema hanya untuk pribadi bukan untuk disediakan pada perpustakaan tema WordPress.
• Description adalah deskripsi tema Anda, silahkan tuliskan beberapa kata yang sesuai.
• Author : ganti dengan nama Anda.
• Author URI adalah alamat situs web atau blog Anda, silahkan diganti dengan milik Anda.
• Template adalah nama tema utama yang kita pakai, pada contoh ini saya menggunakan twentysixteen. Silahkan disesuaikan dengan tema utama Anda.
• Version : versi temanya.
• License dan License URI biarkan saja seperti itu.
• Tags : Silahkan disesuaikan dengan milik anda, misal tema yang Anda buat memiliki fitur dan warna seperti apa. Anda bisa menuliskan beberapa yang sesuai dan dipisah dengan tanda koma.
• Text Domain : ini berfungsi jika Anda membuat terjemahan untuk beberapa bahasa di tema yang Anda buat, dengan cara memanggil text domain.

Oke, sampai disini kita sudah membuat styleshee nya. Lanjut ke langkah berikutnya.

Membuat Functions.php

Masih didalam direktori yang tadi. Sekarang kita membuat file baru yaitu functions.php.

Setelah di buat, kita tambahkan fungsi di dalam file functions.php seperti contoh di bawah ini:

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Contoh fungsi di atas adalah untuk memanggil style.css yang ada pada tema utama kita.

Sekarang coba aktifkan Child Theme yang sudah kita buat, dan coba lihat hasilnya.

Sementara tampilan masih tampak seperti tema utamanya, karena kita masih menggunakan style dari tema utama. Untuk memodifikasi style nya kita hanya perlu menambahkan pada style.css yang ada pada direktori child theme kita.

Jadi ketika kita ingin memodifikasi temanya, kita hanya perlu fokus pada child theme kita dan tidak perlu melakukan perubahan apapun pada tema utama.

Selamat mencoba 🙂