Apa itu WordPress Child Theme?
Seperti namanya, child theme yang berarti juga tema anak adalah turunan atau tema yang mewarisi seluruh code dan fungsi dari tema induknya atau tema utama. Fungsi dari child theme itu sendiri adalah untuk memungkinkan Anda memodifikasi, menambah fungsi tema utama atau juga merubah style dari tema utama tanpa harus menyentuh satupun file di theme induk.
Mengapa harus Child Theme?
Mengapa harus repot-repot menggunakan child theme bila Anda bisa langsung mengubah atau menambahkan sesuatu di theme induk? Anggap Anda menggunakan tema komersil yang disediakan dari WordPress ORG sebagai tema utama Anda saat ini. Lalu Anda ingin mengubah bentuk tampilan post Anda menjadi seperti yang Anda inginkan. Anda mengubahnya di tema utama dan berhasil, lalu beberapa hari kemudian tema tersebut memiliki update terbaru, entah itu memperbaiki bugs, update keamanan ataupun hanya menambahkan warna.
Lalu Anda meng-klik update pada tema yang sudah Anda ubah sebelumnya. Maka semua perubahan itu akan hilang, terganti oleh update, kembali menjadi tema utama dasar aslinya. Adapun Anda melakukan update manual seperti menyamakan perubahan dan melihat apa saja yang diubah untuk berikutnya Anda tambahkan satu persatu ke tema Anda, bukankah itu lebih memakan waktu dan berpotensi error lebih besar?
Maka seperti yang dijelaskan di atas tadi, Child Theme berfungsi sebagai “penambah” untuk tema utama Anda tanpa harus menyentuh file di tema utama. Jika Anda melakukan perubahan dan penambahan di Child Theme, maka saat tema utama Anda update, perubahan tersebut tidak akan hilang.
Cara membuat child theme
Pertama, pastikan Anda memiliki akses ke File Manager dalam server website Anda atau akses ke FTP. Kemudian masuk dalam direktori wp-content > themes. Temukan nama tema yang hendak Anda tambahkan child theme nya.
Setelah membuat folder seperti gambar diatas, Anda harus menambahkan file baru di dalam folder child theme, file yang harus ditambah yaitu:
- style.css
- function.php
- screenshot.png (dapat mengambil dari folder tema utama)
Stylesheet (style.css)
Style pada child theme umumnya mengambil bawaan dari tema utama, karenanya isi child theme style selalu kosong. Dari sini Anda dapat menambahkan style baru atau menimpa style yang sudah ada di tema utama.
Isi dari file style.css dalam child theme biasanya hanya CSS comment:
/*
Theme Name: Tema Child
Theme URI: https://url-website.com/
Description: Tema Child Theme Text
Author: Nama Anda
Author URI: https://url-website.com/
Template: tema-prefix
Version: 1.0.0
Tags: CSS tags
Text Domain: tema-child
*/
- Theme Name: Adalah nama tema child Anda. Disarankan agar memakai nama tema utama di depannya
- Theme URI: Alamat website dimana tema Anda digunakan
- Description: Text apapun yang mendeskripsikan tema child Anda
- Author: Nama pemilik tema, bisa memakai pemilik nama tema utama
- Author URI: Alamat website pemilik tema
- Template: Nama tema utama (bisa dilihat di folder wp-content > themes)
- Version: Versi child theme Anda
- Tags: CSS Tags untuk tema Anda, dapat menyamakan dengan tema utama
- Text Domain: Digunakan untuk translate, bisa disamakan dengan tema utama jika Anda tidak menggunakan prefix lain
File Fungsi Child Theme (function.php)
File ini memiliki fungsi untuk memanggil child theme sebagai tema ekstensi dari tema utama. Bila Anda tidak memasukkan code ini di function.php, child theme tidak akan berjalan meski sudah diaktifkan.
function namatema_enqueue_styles() {
$parent_style = 'namatema-style'; // This is 'namatema-style' for the namatema theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css', array( 'namatema-plugin' ) );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('1.0.0')
);
}
add_action( 'wp_enqueue_scripts', 'namatema_enqueue_styles' );
Wp_enqueue_style berfungsi memanggil style child theme ke dalam website setelah theme diaktifkan. Di dalam array( ‘namatema-plugin’ ) harus diisi menggunakan salah satu nama style yang dipakai di dalam tema utama. Maka kemudian style child akan dipanggil setelahnya.
Atau bisa juga memakai kode ini:
function namatema_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.min.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'namatema_enqueue_styles' );
Fungsinya sama, Anda hanya perlu mengganti nama file “style.min.css” untuk parent-style tergantung nama file yang ada di dalam folder tema utama.
Aktivasi Tema Child
Setelah membuat kedua file diatas beserta isinya, Anda hanya perlu mengaktifkan child theme Anda di dalam halaman admin WordPress website Anda. Kemudian buka menu Appearance > Themes, cari nama child theme Anda lalu klik activate.
