Cara Buat Child Theme WordPress Tanpa Plugin

Ingin mengubah tema tanpa menyentuh tema asli yang kamu gunakan? Child Theme jawabannya. Pada artikel kali ini, kita akan membahas apa itu child theme (tema anak)? Bagaimana cara membuat child theme? Dan apa saja manfaat yang bisa kamu dapat dari tema anak tersebut.

Memilih tema yang sesuai dengan selera dan kebutuhan website adalah hal yang gampang-gampang susah, apalagi kalau pilihan tema dibatasi hanya yang gratisan saja.

Dengan tema premium, perubahan dapat dilakukan dengan lebih mudah karena opsi yang diberikan lebih beragam.

Untuk menggunakan tema gratis, mau tidak mau kamu harus melakukannya sendiri secara manual.

Tapi mengubah tema agar dapat tampil sesuai keinginan kita bukanlah hal yang sepele. Selain harus mengetahui WordPress secara teknis, kesalahan yang kamu lakukan bisa saja membuat situs wordpress malah tidak bisa diakses.

Belum lagi bila kamu mengupdate tema yang kamu gunakan, maka semua perubahan yang kamu lakukan akan ikut hilang dan kamu harus mengaturnya lagi dari awal.

Untuk itulah kamu memerlukan tema anak (child theme).

Apa itu Child Theme?

Tema anak atau child theme adalah tema yang dibuat berdasarkan tema lainnya, dalam hal ini disebut parent theme. Jadi secara default, child theme akan mewarisi fungsi dan tampilan yang sama seperti parent themenya.

Meskipun bergantung sepenuhnya pada parent theme agar dapat berfungsi dengan baik, child theme memiliki struktur yang terpisah.

Hal ini membuat perubahan yang kamu lakukan pada child theme tidak akan berpengaruh kepada parent theme, meskipun hal yang sama tidak berlaku sebaliknya.

Bila kamu melakukan beberapa perubahan penting pada tema WordPress yang kamu gunakan, menggunakan child theme akan memberikan banyak keuntungan, seperti:

• Perubahan tidak akan hilang bila kamu mengupdate parent theme atau tema asli yang kamu gunakan.
• Kamu tidak perlu khawatir kesalahan yang kamu lakukan pada child theme akan berpengaruh terhadap tema asli.
• Kamu selalu dapat kembali ke tema asli kapanpun kamu mau.
• Dapat dengan mudah mengontrol perubahan yang kamu lakukan karena child theme memiliki filenya sendiri.
• Mempercepat proses pengembangan tema karena kamu tidak perlu lagi membuat tema dari awal, cukup melakukan perubahan yang kamu rasa perlu.

Bagaimana cara kerja child theme?

Child theme sangat bergantung pada parent theme agar dapat digunakan. Untuk itu pastikan kamu tidak menghapus parent theme.

Bila kamu membuat child theme, akan ada file di mana kamu mendeklarasikan tema tertentu sebagai template tema anak yang kamu buat.

Setelah mengaktifkan child theme, WordPress akan mencari terlebih dahulu semua file yang diperlukan, seperti header.php atau footer.php, dll, pada folder tema anak. Bila file-file tersebut tidak ditemukan, maka WordPress akan mencarinya pada parent theme.

Namun khusus untuk file functions.php, semua perintah yang ada file tersebut akan dieksekusi sebelum perintah yang ada pada file functions.php milik parent theme. Jadi keduanya sama-sama digunakan.

Bagaimana cara membuat child theme?

Agar lebih mudah dipahami, kali ini kita akan membuat child theme berdasarkan tema default WordPress, Twenty Seventeen.

Empat langkah dalam membuat child theme adalah sebagai berikut:

1. Membuat folder child theme
2. Membuat file functions.php
3. Membuat file style.css
4. Menambahkan screenshot (optional)

1. Membuat folder child theme

Hal pertama yang kita butuhkan adalah folder yang akan menampung semua file yang kita butuhkan.

Untuk penamaan folder, kamu bisa menggunakan nama folder tema asli yang diikuti oleh akhiran ‘-child’. Hal ini dapat mempermudah kamu untuk melacak tema asli yang digunakan.

Seperti contoh kali ini, kita akan menamai folder dengan nama ‘twentyseventeen-child’.

Meskipun kamu bisa menggunakan nama lainnya, usahakan untuk tidak menamai folder dengan menggunakan spasi karena seringkali hal ini akan membuat child theme error dan tidak bisa digunakan.

2. Membuat file style.css

Langkah berikutnya yang akan kita lakukan adalah membuat file style.css.

Cara yang paling mudah adalah dengan mengkopi file style.css dari tema yang asli. Buka file tersebut dan hapus semua isinya kecuali bagian header yang berada di baris teratas dan berada di antara tag /* dan */.

Jangan disimpan dulu!

Ada beberapa hal yang harus diubah terlebih dahulu.

Bila kamu berencana untuk mempublikasikan tema anak yang kamu buat (Yup! kamu bisa), ganti data-data di atas dengan data tema anak kamu sendiri.

Setelah itu, ubah nama TEXT DOMAIN menjadi nama child theme dan tambahkan data TEMPLATE yang berisi nama Text Domain tema asli.

Seperti pada contoh kali ini, maka file style.css yang kita buat akan memiliki isi seperti berikut:

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen-child
Template: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Untuk kamu yang hanya ingin menggunakan tema anak untuk kamu sendiri, sebenarnya kamu tidak perlu untuk menggunakan semua data di atas. Yang kamu perlu hanya mencantumkan THEME NAME dan TEMPLATE saja, seperti contoh berikut ini.

/*
Theme Name: Twenty Seventeen Child Theme
Template: twentyseventeen
*/

3. Membuat file functions.php

Langkah terakhir adalah membuat file functions.php agar child theme dapat mewarisi fitur dan tampilan dari parent theme.

Pada file functions.php yang kamu buat, isi dengan kode berikut:

<?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' );

Setelah selesai, simpan file functions.php pada folder yang sudah kita buat.

Untuk memunculkan child theme pada situs WordPress, cukup kompress folder dan ubah menjadi file dengan ekstensi ZIP. Setelah itu, gunakan file ZIP dan install tema seperti biasa.

Setelah proses instalasi selesai, kamu dapat melihat tema yang baru kamu buat pada lama tema WordPress.

4. Menambahkan file screenshot.png (optional)

Bila kamu melihat child theme yang sudah dibuat pada laman tema, maka perhatikan bahwa bila dibandingkan dengan tema lainnya, tampilan child theme masih polos. Ini karena tema tersebut tidak memiliki screenshot.

Bila kamu tidak masalah dengan hal ini, maka kamu tidak perlu repot-repot membuatnya.

Namun bila kamu ingin menambahkannya, cukup berikan file gambar dengan ekstensi PNG pada folder yang sudah kita buat dan beri nama SCREENSHOT.PNG.

Ukuran gambar yang dibutuhkan minimal 300×225 pixels meskipun direkomendasikan untuk menggunakan ukuran 880×660 pixel agar gambar dapat terlihat bagus pada layar beresolusi tinggi.

Bagaimana cara menggunakan child theme?

Setelah kamu selesai membuat child theme, mungkin kamu bertanya-tanya kenapa tampilannya masih sama seperti parent themenya?

Tenang saja, ini karena kita belum melakukan perubahan pada child theme.

Lalu, bagaimana cara menggunakan child theme?

Seperti sudah dijelaskan sebelumnya, wordpress akan mengeksekusi semua file yang ada pada child theme kemudian mencari file yang kurang pada parent theme. Kecuali pada file functions.php di mana kedua file, baik pada child theme maupun parent theme, akan dieksekusi keduanya.

a. Mengubah tampilan melalui style.css dan menambahkan fungsi melalui functions.php

Untuk mengubah tampilan atau menambahkan fungsi pada child theme, kita bisa memanfaatkan file style.css dan functions.php yang sudah kita buat tadi.

Untuk mengubah tampilan dengan menggunakan CSS, cukup tambahkan kode setelah header style sheet.

Semua kode yang kamu masukan di sini akan diberi prioritas utama dan akan mengesampingkan kode yang sama pada parent theme.

Sama halnya bila kamu ingin menambahkan fungsi pada wordpress melalui functions.php, cukup tambahkan kode setelah kode child theme yang dimasukkan tadi.

Tidak seperti style.css yang akan membatalkan perintah yang sama pada parent theme, hal yang sama tidak berlaku untuk perintah yang kamu eksekusi melalui functions.php. Jadi periksa dulu fungsi yang ada pada parent theme sebelum menambahkan fungsi baru pada child theme.

b. Mengubah elemen tema lainnya

Untuk mengubah elemen tema lainnya seperti header.php, footer.php, single.php, dan yang lainnya. Kamu harus terlebih dahulu mengkopi file-file yang kamu butuhkan baru kemudian mengubah file tersebut.

Dan untuk file yang berada pada folder tertentu pada parent theme, maka kamu juga harus mengkopinya pada folder yang sama pada child theme.

Misalnya saja saya ingin mengubah file custom-header.php dari tema Twenty Seventeen yang ada pada folder inc.

Untuk mengeditnya pada child theme, maka saya harus membuat folder inc juga pada direktori child theme dan meletakan file custom-header.php di sana.

Penutup

Seperti kamu lihat, menggunakan child theme adalah solusi untuk kamu yang sering mengutak-atik WordPress.

Dengan menggunakan child theme, kamu dapat bebas mengubah atau menambahkan fungsi dan tampilan WordPress tanpa harus khawatir situs kamu menjadi rusak atau malah crash.

Untuk kamu yang tertarik dengan pembahasan child theme yang lebih mendalam, coba baca penjelasan yang ada pada WordPress Codex. Bila kamu sudah menggunakannya, jangan segan untuk berbagi tips dan trik pada kolom komentar di bawah ini yah