Cara Membuat Child Theme WordPress

cara membuat child theme wordpress

Cara membuat child theme wordpress sangatlah mudah. Anda hanya akan mengikuti beberapa langkah dan child theme wordpress anda telah siap. Tetapi sebelum lanjut ke tutorial membuat child theme wordpress, ada baiknya anda mengetahui fungsi child theme dan bagaimana cara kerja child themes.

Fungsi dan Manfaat Child Theme WordPress

Fungsi sebenarnya child theme pada wordpress adalah agar anda dapat merubah atau memodifikasi theme wordpress utama anda tanpa harus mempengaruhi kode theme wordpress utama. Sebagai contoh, ketika anda menambahkan CSS atau kode untuk merubah warna header wordpress maka CSS atau kode tersebut tidak akan merubah kode CSS theme wordpress utama anda.

Selanjutnya apabila anda menonaktifkan child theme maka tema akan kembali ke tema utama tanpa modifikasi yang sebelumnya anda lakukan di child theme.

Oleh karena itu, child theme sebaiknya anda aktifkan apabila anda ingin memodifikasi tema utama tanpa harus merubah kode utama wordpress anda. Dan pilihan terakhir adalah anda tetap merubah tema utama anda tetapi anda harus siap kehilangan modifikasi setelah melakukan update tema utama anda.

Cara Kerja Child Theme WordPress

Child theme berada di direktori yang berbeda dari tema utama, oleh karena itu setiap perubahan yang dilakukan di child theme tidak merubah kode di tema utama anda. Biasanya child theme berada di direktori ./wp-content/themes.

Pada direktori child theme biasanya ada file .css dan .php. File tersebut yang anda dapat gunakan untuk merubah dan memodifikasi tema utama anda. Ketika ada yang mengunjungi website anda maka yang akan termuat terlebih dahulu adalah child theme. Selanjutnya jika sudah tidak ada file lagi yang termuat maka akan memuat tema utama anda untuk melengkapi child theme.

Baca Juga  Cara Membuat Live Chat Whatsapp di Wordpress

Hal yang dibutuhkan Untuk Membuat Child Theme WordPress

Hal yang harus anda perhatikan sebelum membuat child theme wordpress adalah anda harus memiliki dasar pengetahuan mengenai bahasa pemrograman CSS / HTML maupun PHP. Hal ini berguna untuk mempermudah anda dalam melakukan modifikasi pada child theme anda. Anda dapat belajar CSS dan HTML di website W3Schools.

Selanjutnya untuk memulai membuat child theme di wordpress anda perlu mempersiapkan

  1. Akses ke halaman admin Worpdress
  2. Akses ke File Manager Website

Anda juga bisa menggunakan aplikasi FTP seperti Filezilla, WinSCP atau sejenisnya untuk akses ke File Manager anda.

Cara Membuat Child Theme WordPress

Saat ini kita akan masuk pada pembahasan bagaimana cara membuat child theme wordpress. Caranya cukup mudah, anda hanya tinggal melakukan beberapa copy paste kode yang sudah ada di tema utama wordpress.

Akses Cpanel Website

Langkah pertama yang perlu anda lakukan untuk membuat child theme adalah mengakses Cpanel Website anda. Silahkan akses cpanel anda dengan mengetikkan www.domainanda.com/cpanel atau cpanel.domainanda.com. Anda juga bisa mengakses client area di tempat hosting anda untuk mengakses cpanel anda.

Jika sudah masuk ke cpanel anda, kemudian klik menu File Manager seperti pada gambar dibawah ini.

Cara Membuat Child Theme WordPress 1

File manager berfungsi untuk membantu anda mengakses semua script dan file yang berada di website anda. Baik instalasi tema, plugin maupun file yang telah anda upload di website anda.

Masuk ke direktori Tema

Langkah kedua adalah anda harus masuk ke direktori tema website anda. Silahkan pilih public_html/wp-content/themes atau anda bisa lihat pada gambar dibawah ini.

Cara Membuat Child Theme WordPress 2

Direktori tema berisi seluruh tema yang ada di website anda, baik tema yang aktif maupun tema yang tidak aktif.

Buat Folder Child Theme

Saat anda berada di direktori tema, silahkan buat folder untuk child theme anda. Perlu diingat hindari penggunaan spasi agar tidak terjadi error atau kesalahan nanti. Anda juga bisa menambahkan “-child” dari tema bawaan anda seperti pada gambar dibawah ini

Baca Juga  Cara Menggunakan Elementor Page Builder di Wordpress

Cara Membuat Child Theme WordPress 4

Saya menggunakan tema bezel sebagai tema utama website. Kemudian membuat child theme untuk tema bezel sehingga saya memberi nama direktori tema menjadi bezel-child. Anda dapat menggunakan nama lain untuk child theme anda.

Buat file Style.css Child Theme

Setelah anda membuat direktori child theme, silahkan anda masuk kedalam direktori tersebut. Selanjutnya anda harus membuat file style.css yang nanti akan berisi CSS modifikasi website anda. Klik +File untuk membuat file style.css seperti pada gambar dibawah ini.

Cara Membuat Child Theme WordPress 5

Kemudian lakukan edit file yang baru saja anda buat dengan cara klik kanan pada file style.css kemudian klik edit. Lakukan copy paste script dibawah ini kedalam file style.css

/*Theme Name: bezel-child
Theme URI: https://beril.id
Description: Tutorial Linux, Windows dan WordPress
Author: beril.id
Author URI: https://beril.id
Template: bezel
Version: 1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

Cara Membuat Child Theme WordPress 6

Setelah dipaste ke dalam style.css anda, silahkan lakukan modifikasi sesuai dengan tema dan domain anda saat ini. Hal terpenting yang perlu dirubah adalah pada bagian Template.

Bagian Template ini adalah nama dari tema utama anda jadi harus disesuaikan. Jika sudah silahkan simpan perubahan yang anda telah lakukan.

Buat File Functions.php Child Theme

Selanjutnya anda perlu membuat file functions.php yang berfungsi untuk memuat file dan skrip di tema utama yang tidak ada di child theme. Cara membuat functions.php pada wordpress juga cukup mudah sama seperti membuat file style.css sebelumnya.

Jika sudah silahkan copy kan kode dibawah ini kedalam file functions.php yang baru saja anda buat. Anda tidak perlu melakukan modifikasi script pada file functions.php. Biarkan seperti dibawah ini.

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

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

jika sudah silahkan save kembali file tersebut.

Aktifkan Child Theme WordPress

Sampai disini anda telah berhasil membuat child theme di wordpress. Silahkan anda login ke dashboard wordpress anda. Lalu aktifkan child theme dengan mengunjungi menu tampilan -> tema. Klik Aktifkan untuk mengaktifkan child theme wordpress anda.

Aktifkan child theme wordpress

Sampai disini memang tidak ada yang berbeda dengan tampilan website anda. Karena anda belum melakukan modifikasi apapun terhadap child theme anda. Silahkan coba rubah warna header website anda sebagai contoh. Gambar dibawah ini adalah header website beril.id sebelum dimodifikasi.

Baca Juga  Tutorial Posting Artikel SEO Menggunakan Wordpress

Tema sebelum diedit

Selanjutnya untuk memodifikasi header dengan menggunakan child theme, saya perlu menambahkan kode

.site-header
{
Background: #192a56;
}

Kedalam style.css pada direktori child theme. Silahkan anda login ke cpanel anda lalu masuk ke folder child theme anda dan edit style.css. selanjutnya masukkan kode tersebut tepat seperti pada gambar dibawah ini. Kemudian Save Changes.

Edit CSS Child Theme

Sampai disini anda telah berhasil melakukan perubahan tampilan di child theme. Silahkan cek gambar dibawah ini setelah memasukkan kode diatas maka header berubah warna menjadi biru tua.

Edit Header Child Theme

Perlu diingat bahwa setiap kode dan modifikasi harus disesuaikan dengan kode CSS pada tema utama anda. Jadi kode yang saya gunakan diatas mungkin tidak akan bekerja di tema anda.

Demikian tutorial cara membuat theme child wordpress yang dapat saya bagikan. Apabila ada pertanyaan jangan sungkan untuk berdiskusi melalui kolom komentar dibawah artikel ini.

Bagikan apabila menurut kalian artikel ini bermanfaat untuk orang lain. Terima kasih.

Bagikan :
Deni Rusdiaman

Author: Deni Rusdiaman

“Seseorang yang tidak pernah melakukan kesalahan tidak pernah mencoba sesuatu yang baru.” -Albert Einstein-