Kategori
WordPress Tutorial

Cara Membuat Child Theme WordPress

Child theme adalah cara teraman dan termudah untuk memodifikasi website WordPress Anda.

Saat Anda mengunduh atau membeli theme WordPress, dan Anda ingin memodifikasinya, biasanya pembuat tema akan menyarankan untuk menggunakan child theme. Child theme adalah cara teraman dan termudah untuk memodifikasi website WordPress Anda tanpa mengubah parent theme yang Anda gunakan.

Saya harus mengingatkan Anda, Anda harus memiliki sedikit pengalaman atau ilmu dasar PHP dan CSS dan fungsionalitas WordPress untuk membuat child theme secara manual.

Tapi jangan khawatir, saya akan memberi Anda panduan langkah demi langkah, cara membuat child theme WordPress menggunakan plugin.

Saya akan memulai panduan ini dari apa itu parent theme dan child theme dan mengapa menggunakan child theme, silakan lompat ke topik yang ingin Anda baca menggunakan tautan di bawah ini.

Baik, mari kita mulai.

Apa itu Parent Theme?

Cara Membuat Child Theme WordPress

Ada 2 tipe theme dalam WordPress, yaitu parent theme dan child theme.

Parent theme adalah theme yang biasa Anda gunakan, unduh secara gratis ataupun beli di berbagai marketplace yang menjual theme WordPress, semua itu adalah parent theme.

Parent theme merupakan theme utama, theme yang menghandle semua fungsi dan style yang Anda lihat pada website WordPress Anda.

Contoh lain parent theme adalah theme bawaan WordPress, saat ini (2021) pada instalasi WordPress, Anda pasti memiliki 1 theme yaitu Twenty Twenty One.

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 melalui CSS 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 seperti yang sudah saya bahas pada paragraf pertama, child theme adalah cara teraman dan termudah untuk memodifikasi atau mengkustomisasi website WordPress Anda.

Selain itu, berikut adalah beberapa alasan mengapa Anda harus menggunakan child theme:

  1. Ketika terdapat pembaharuan atau update untuk parent theme yang Anda gunakan, semua tampilan atau fungsi hasil modifikasi Anda tidak akan hilang.
  2. Jika Anda memiliki beberapa websute yang menggunakan parent theme yang sama, Anda dapat melakukan modifikasi dengan satu child theme, kemudian Anda dapat membawa atau menginstal child theme ini ke semua website yang Anda miliki.
  3. Ketika membangun sebuah website atau blog, effort yang Anda keluarkan lebih sedikit ketimbang membuat sebuah theme baru dari nol.
  4. Child theme merupakan cara paling mudah untuk Anda yang ingin belajar pengembangan theme WordPress.

Cara Membuat Child Theme WordPress

Ada 2 cara untuk membuat child theme, Anda dapat memilih mana yang terbaik untuk Anda, baik membuatnya secara manual atau menggunakan plugin.

Seperti yang saya sebutkan di atas, jika Anda tertarik untuk mempelajari pengembangan theme WordPress, Anda harus mencoba membuat child theme secara manual.

Membuat Buat Child Theme Secara Manual

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.

Jika Anda memerlukan informasi lebih lanjut, Anda dapat membaca dokumentasi resmi untuk child theme.

Membuat Buat Child Theme Menggunakan Plugin

Jika Anda lihat ke direktori plugin resmi WordPress, dan Anda mencari Child Theme, Anda akan melihat beberapa plugin yang dapat membantu Anda membuat child theme dengan mudah.

Saat ini, yang paling populer adalah Child Theme Configurator, ini adalah plugin yang cukup lengkap, tetapi plugin ini menyertakan beberapa opsi yang mungkin membingungkan Anda. Saya sarankan Anda menggunakan Child Theme Wizard.

Instal Child Theme Wizard

Untuk menginstalnya, saya berasumsi Anda sudah familiar dengan cara menginstal sebuah plugin. Setelah Anda menginstal dan mengaktifkannya, buka Tools > Child Theme Wizard.

Di halaman ini, Anda dapat menyesuaikan child theme yang akan dihasilkan oleh plugin ini. Setelah selesai, Anda dapat mengklik tombol Create Child Theme. Anda akan diarahkan ke halaman sukses.

Child Theme Wizard

Untuk memeriksa apakah direktori child theme sudah dibuat, masuk ke cPanel atau FTP Anda dan buka wp-content/themes/, Anda akan melihat direktori child theme yang baru ditambahkan di sana.

Setelah itu, Anda dapat mengaktifkan theme tersebut melalui Appearance > Themes, arahkan kursor ke child theme yang baru saja Anda buat, lalu klik Activate. Itu saja, child theme Anda sudah siap!

Kesimpulan

Child theme merupakan cara yang direkomendasikan dan teraman untuk mengkustomisasi website WordPress Anda.

Apabila ada pertanyaan atau ada penjelasan yang kurang jelas mengenai cara membuat child theme WordPress, silahkan tanyakan pada kolom komentar di bawah ini.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *