Cara Membuat Child Themes Twenty Twelve

Update WordPress 3.5 yang di dalamnya terdapat theme Twenty Twelve yang responsif, simpel, fleksibel, elegan, dan menggunakan fitur terbaru WordPress. Alasan saya memakai theme Twenty Twelve karena ringan loadingnya, tampilan warna yang lembut, font artikel yang nyaman di mata. Di samping itu desain theme telah Valid HTML5 dan Valid CSS3, Congratulations! No Error Found.

Twenty Twelve theme bawaan WordPress 3.5. Agar modifikasi theme tidak hilang ketika theme di-update, maka perubahan tersebut harus ditempatkan di file lain. Atas hal ini WordPress memberi brilian agar modifikasi tidak akan hilang jika perubahan dilakukan yaitu melalui Child Themes. Komponen minimum file yang wajib ada di direktori Child Themes hanya style.css. Sedangkan file-file theme lain yang akan dimodifikasi bersifat opsional.

Cara Membuat Child Themes

1. Buat folder nama Child theme (misalkan: twentytwelve-child ) di direktori yang sama dengan direktori theme induk. Bila letak direktori theme induk di wp-content/themes/twentytwelve maka child theme-nya di wp-content/themes/twentytwelve-child;
2. Tulis kode CSS yang ingin dimodifikasi seperti contoh di bawah ini dengan Notepad atau Notepad++ lalu simpan dengan nama style.css dan letakkan pada direktori content/themes/twentytwelve-child;
3. Kode CSS Theme Name (Twenty Twelve Child) dan Template wajib ada. Nama template (twentytwelve) karakter case-sensitive. Sedangkan baris yang lain, theme URI, description, author, dan author URI ubah sesuai keinginan;
4. Setelah selesai membuat kode style.css dan disimpan cara mengaktifkan Child Theme dari Dashboard WordPress. Appearance > Themes > Twenty Twelve Child (pilih) > Activate. Apabila modifikasi tampilan Child Theme sudah selesai, agar preview tidak kosong, screenshot.png ukuran 600×450 dapat ditempatkan direktori Child Theme.

/*
Theme Name: Twenty Twelve Child
Theme URI: https://isnan-wijarno.com
Description: Child theme for the Twenty Twelve
Author: Isnan Wijarno
Author URI: https://isnan-wijarno.com/about/
Template: twentytwelve
Version: 1.0.0
*/
@import url('../twentytwelve/style.css');
/* Don't display text "You may use these HTML tags and attributes" bottom box of comments */
#respond .form-allowed-tags {
display:none;
}
/* change colour site title */
.site-title a {
    color: #009900;
}

Hanya dengan satu file style.css Anda sudah dapat membuat theme (Child Theme). Tidak seru bila yang diubah hanya tampilan (CSS) saja. Fungsi-fungsi lain dapat diubah sesuka hati,  terutama fungsi PHP yang di file functions.php. Caranya copy file yang ingin diubah ke direktori Child Theme (hanya untuk memudahkan penamaan agar sama dengan theme induk). Lalu hapus semua kode yang ada di dalam file tersebut. Beri komentar (/* komentar */) pada awal file, atau setiap awal kode untuk memudahkan pelacakan, tentang informasi perubahan apa saja yang diubah. Tulis hanya kode yang akan diubah dari theme induk di Child Theme.

Fungsi dalam theme induk yang tidak diubah akan tetap digunakan, sehingga tidak perlu copy-paste semua kode ke Child Theme. Sedangkan fungsi tambahan dalam Child Theme juga dieksekusi.

Kelebihan Child Themes apabila theme di-update, modifikasi kode tidak akan hilang karena tidak menyentuh file induk. Mudah sekali pengelolaannya karena menulis kode yang ingin ditambahkan saja. Kekurangannya menambah waktu beberapa milidetik untuk mengakses kode-kode dalam file Child Theme. Alasan saya tidak menggunakan Child Theme tetapi mengubah langsung kode dari theme induk karena Google Page Speed menyarankan Avoid CSS @import.