WordPress Theme dan Child Theme

WordPress Theme adalah gabungan antara beberapa file yang berfungsi untuk menentukan tampilan pada website berbasis WordPress. File dalam WordPress theme dapat dikelompokkan dalam dua hal pokok, yaitu template dan stylesheet. Kelompok lain yang sifatnya opsional adalah file gambar (images). Template dalam WordPress theme adalah file-file PHP yang berisi bagian-bagian dari struktur halaman web. Stylesheet adalah file CSS yang membentuk layout dari template yang ada. Pada dasarnya, untuk mengubah tampilan setiap theme dapat dilakukan hanya dengan melakukan ubahan pada file style.css, yaitu stylesheet utama dari setiap WordPress theme.

Anatomi WordPress Theme

Setiap WordPress theme tergabung dalam satu folder pada salah satu sub-direktori instalasi WordPress yaitu wp-content/themes. Contohnya, sebuah theme bernama “Test” biasanya tersimpan dalam sub-direktori wp-content/themes/test.

WordPress theme minimal harus memiliki dua file yaitu index.php dan style.css. File lainnya sifatnya opsional. Namun demikian, setiap WordPress theme biasanya juga menyertakan file-file template lain seperti sidebar.php dan comments.php. File-file template sifatnya menjadi penting apabila tidak terdapat WordPress theme bawaan/default.

Template lain yang sering juga dibutuhkan adalah functions.php, dimana di dalamnya bisa dituliskan fungsi fungsi PHP tambahan apabila dibutuhkan. File ini adalah file yang pertama kali dibaca oleh WordPress sebelum membaca file-file template yang lain.

Modifikasi dan pengaturan layout WordPress theme dilakukan dalam file CSS, setiap theme harus memiliki file style.css. File ini juga harus berisi informasi tentang theme yang digunakan yang daat dilihat pada bagian awal dari isi file style.css seperti contohnya:

/*
Theme Name: Nama Theme
Theme URI: Homepage dari theme
Description: Penjelasan singkat mengenai theme ini
Author: Nama pembuat theme
Author URI: URL Website pembuat theme
*/

Child Theme

Child Theme merupakan bentuk WordPress theme yang paling sederhana karena bisa dibuat hanya dengan menyertakan satu file CSS saja yaitu style.css. Hal ini dimungkingkan karena child theme menggunakan template yang terdapat pada theme lain. Preaxz Dotcom misalnya, menggunakan theme preaxz yang merupakan child theme dari Temadasar. Dalam hal ini, theme Temadasar disebut sebagai Parent Theme.

Penggunaan child theme lebih dianjurkan apabila ingin memodifikasi tampilan dari theme lain daripada mengubah langsung file-file template dan CSS pada theme tersebut. Salah satu keuntungannya adalah apabila terdapat update pada theme lain tadi, kita tidak direpotkan dengan mengubah ulang. Bahkan tidak jarang terjadi, tampilan website menjadi kacau apabila terlalu banyak ubahan yang dibuat.

Membuat Child Theme

Membuat child theme juga mudah, minimal hanya perlu penguasaan terhadap CSS karena file yang harus ada dalam setiap child theme adalah file style.css.

Berbeda pada file style.css pada WordPress theme biasa, pada child theme harus ditambahkan baris yang menginformasikan WordPress tentang penggunaan theme lain sebagai parent theme seperti contoh berikut.

Template: default

default pada contoh di atas adalah nama folder yang digunakan oleh parent theme. Kode tadi ditambahkan pada deretan informasi pada file style.css seperti contoh berikut;

/*
Theme Name: Nama Theme
Theme URI: Homepage dari theme
Description: Penjelasan singkat mengenai theme ini
Author: Nama pembuat theme
Author URI: URL Website pembuat theme
Template: default
*/

Modifikasi Theme dengan Child Theme

Secara default, WordPress akan menggunakan file template yang terdapat pada parent theme apabila file yang sama tidak ditemukan pada child theme. Jadi, apabila Anda ingin mengubah isi atau struktur dari file index.php pada parent theme, yang perlu dilakukan adalah membuat file index.php pada child theme.

Untuk CSS, karena file style.css memang harus dibuat tersendiri dan Anda hanya ingin melakukan sedikit perubahan pada tampilan aslinya seperti membuat judul menjadi tebal (bold) dan lain-lain, maka Anda juga perlu “memanggil” CSS yang digunakan pada parent theme. Caranya adalah dengan menambahkan kode berikut di awal file style.css Anda:

@import url('../default/style.css');

Ingat! Default dalam contoh ini adalah nama folder parent theme, ubah dengan nama folder dari parent theme yang Anda gunakan.

Berani mencoba?