WordPress

Memahami dan Cara Membuat Child Theme WordPress

Pinterest LinkedIn Tumblr

Sebelum Anda mulai membaca dan membuat child theme WordPress, ada baiknya saya ingatkan kalau artikel ini membutuhkan sedikit pengetahuan mengenai PHP dan CSS.

Ada 2 tipe theme dalam WordPress, yaitu parent theme dan child theme. Parent theme adalah theme yang biasa Anda gunakan, download secara gratis ataupun beli di berbagai marketplace yang menjual WordPress theme. Contoh parent theme adalah theme bawaan WordPress, saat ini (2020) pada instalasi WordPress, Anda pasti memiliki 1 theme yaitu Twenty Twenty.

Twentytwenty - membuat child theme WordPress

Parent theme merupakan theme utama, theme yang menghandle semua fungsi dan style yang Anda lihat pada website WordPress Anda. Lalu, apa itu child theme? Mengapa harus menggunakan child theme? Dan bagaimana cara membuat child theme? Saya akan jelaskan satu per satu di bawah.

Apa Itu Child Theme?

Child theme adalah theme turunan yang memungkinkan kita untuk memodifikasi tampilan ataupun fungsi dari parent theme. Theme turunan maksudnya adalah child theme harus terkoneksi dengan parent theme, jadi Anda tidak bisa menginstal child theme kalau parent themennya tidak ada.

Child theme sederhana hanya membutuhkan 2 file saja, yaitu style.css untuk memodifikasi tampilan dan functions.php untuk memodifikasi atau menambahkan fungsi.

Namun, bisa disesuaikan dengan kebutuhan Anda, semisal Anda ingin memodifikasi area header, Anda hanya perlu menyalin atau copy file header.php kemudian Anda paste di dalam folder child theme yang sudah Anda buat sebelumnya, kemudian Anda bisa langsung memodifikasinya. WordPress akan otomatis membaca header.php yang ada di dalam child theme.

Mengapa Harus Menggunakan Child Theme?

WordPress merekomendasikan penggunaan child theme untuk memodifikasi parent theme yang Anda gunakan, alasannya adalah:

  1. Ketika terdapat pembaharuan atau update untuk parent theme yang Anda gunakan, semua tampilan atau fungsi hasil modifikasi Anda tidak akan hilang.
  2. Ketika membangun sebuah website atau blog, effort yang Anda keluarkan lebih sedikit ketimbang membuat sebuah theme baru dari nol.
  3. Child theme merupakan cara paling mudah untuk Anda yang ingin belajar pengembangan theme WordPress.

Baca juga: Cara Untuk Mengoptimalkan Kecepatan Website WordPress

Cara Membuat Child Theme WordPress

Sudah sedikit saya bahas di atas, child theme sederhana hanya membutuhkan 2 file saja yaitu style.css dan functions.php. Sebelum memulai membuat child theme, saya akan asumsikan Anda ingin membuat child theme untuk website Anda yang sudah live dan Anda memiliki akses ke cPanel.

Sebenarnya lebih cepat dan mudah menggunakan FTP Client untuk mengakses file-file yang ada di server. Tapi cara manapun yang Anda bisa, prosesnya akan tetap sama. Ok lanjut.

  1. Pertama, masuk ke cpanel atau masuk ke server melalui FTP client yang Anda pakai.
  2. Cari dan masuk ke folder wp-content/themes/.
  3. Kemudian buat folder baru, biasanya tapi tidak harus, folder child theme diberi nama parent-child, nama parent theme diberi tambahan -child. Misalkan Anda menggunakan theme TwentyTwenty, berarti nama child themenya TwentyTwenty-child.
  4. Lalu Anda buat 2 file baru di dalam folder tersebut dan beri nama style.css dan functions.php.
  5. Buka file style.css kemudian anda masukan kode di bawah ini. Kode di bawah merupakan kode komentar yang wajib ada disetiap theme WordPress, informasi ini dibutuhkan WordPress untuk ditampilkan datanya di halaman admin Appearance > Themes.
/*
 Theme Name:   Nama Theme
 Theme URI:    http://websiteanda.com/
 Description:  Deskripsi untuk child theme Anda
 Author:       Nama Anda
 Author URI:   http://websiteanda.com/
 Template:     namafolderparenttheme
 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
*/


Ada 2 informasi penting yang harus Anda perhatikan:
1. Theme Name – ini nama child theme, harus unik
2. Template – ini adalah nama dari FOLDER parent theme yang Anda gunakan.

  1. Kemudian buka file functions.php dan masukan kode di bawah ini.
<?php
/**
 * Memanggil file css parent and child theme
 */
function child_theme_enqueue_styles() {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array('parenthandle'),
        false
    );
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');


Fungsi dari kode di atas adalah untuk memanggil file style.css yang baru saja Anda buat di dalam folder child theme. Tapi anda perhatikan kode array('parentheandle'), kode ini untuk memanggil ulang file style.css dari parent theme yang Anda gunakan. Anda harus mengganti parenthandle dengan nama style handle dari parent theme Anda.

Untuk menemukan style handle yang digunakan parent theme:

  1. Buka folder parent theme
  2. Buka file functions.php
  3. Kemudian anda cari kode kurang lebih seperti ini
    wp_enqueue_style('style-handle', get_stylesheet_uri(), array());
  4. Lihat kode di atas yang saya tebalkan, itu adalah style handle.
  5. Setelah Anda mendapatkannya, Anda tuliskan ulang style handle tersebut untuk menggantikan kode parenthandle yang sudah dibahas di atas.

Setelah semua selesai, Anda hanya perlu mengaktifkan child theme yang baru saja dibuat. Masuk ke Appearance > Themes kemudian klik activate atau aktifkan pada child theme tersebut.

Kemudian Anda bisa melanjutkan mengkustomisasi, semua kustom style Anda masukan ke file style.css, untuk kustom fungsi masukan ke file functions.php.

Lanjutkan membaca: Mengkustomisasi Website WordPress Menggunakan Child Theme

Kesimpulan

Child theme merupakan cara yang direkomendasikan dan teraman untuk mengkustomisasi website WordPress Anda. Apabila ada pertanyaan atau ada penjelasan yang kurang jelas, silahkan tanyakan pada kolom komentar di bawah ini.

Nama saya Satrya, saya adalah co-founder blog BackSlashID. Saya sangat mengagumi bahasa CSS, CSS membuat website menjadi indah, berwarna dan menarik!

Write A Comment