Child Themes adalah teknologi terbaru WordPress yang memungkinkan kita untuk mengutak-atik themes tanpa harus mengubah kode aslinya. Bingung kan?
Biasanya, jika kita ingin mengubah suatu themes agar sesuai dengan keinginan kita (misalnya mengganti warna-warna hurufnya) kita harus mengedit file style.css themes tersebut dan file-file lain yang mungkin diperlukan. Permasalahan kemudian muncul tatkala themes yang kita pakai melakukan upgrade. Saat kita mengupgradenya, semua hasil kerja keras kita mengutak-atik themes itu akan lenyap seketika dan themes akan kembali dalam posisinya semula setelah upgrade.
Mungkin anda jarang menemui masalah ini karena memang themes sangat jarang upgrade. Tapi jika anda menggunakan Twenty Ten, masalah itu bakalan muncul setiap kali anda upgrade WordPress.
Cara Membuat Child Themes
Yuk, kita belajar bagaimana membuat child themes sehingga kita bisa aman saat terjadi upgrade themes. Ada 3 elemen penting dalam child themes yaitu
- File style.css
- File functions.php
- File-file themes yang ingin dirubah
Kita mulai dari persiapan membangun sebuah child themes
Persiapan
Sebagai persiapan, anda harus membuat sebuah folder disamping themes yang ingin anda buat child-nya (themes induk). Misalnya themes induk kita Twenty ten, maka biasanya letaknya disini:
wp-content/themes/twentyten
Nah, anda buat folder baru, misalnya kita kasih nama twentytenboy
wp-content/themes/twentytenboy
Nah, 3 komponen diatas, semuanya harus dimasukkan ke dalam folder twentytenboy ini.
Mengatur style.css
Langkah berikutnya adalah memasukkan file style.css. Buatlah sebuah file dengan nama style.css dan isilah dengan kode seperti ini:
/* Theme Name: Twenty Ten Boy Theme URI: http://contohaja.com/ Description: Diskripsi Anak Tema Author: Nama Anda Disini Author URI: http: //contohaja.com/about/ Template: twentyten Version: 0.1.0 */
Berikut ini penjelasannya:
- Theme Name. (required) Nama Child theme.
- Theme URI. (optional) URL Child theme.
- Description. (optional) Diskripsi Theme Misalnya: child Theme pertama saya.. hehehe
- Author URI. (optional) Website pembuat.
- Author. (optional) Nama Pembuat.
- Template. (required) nama folder theme induk, case-sensitive
- Version. (optional) Versi Child theme Misal.: 0.1, 1.0, dll.
Selanjutnya, anda perlu mengimpor CSS dari themes induk dan kemudian menempatkan kode-kode CSS yang perlu anda modifikasi. Contoh kongkritnya seperti ini. Kita akan mencoba mengubah warna teks header Twenty ten menjadi hijau
/* Theme Name: Twenty Ten Boy Description: Child theme untuk Twenty Ten theme Author: Lutvi Avandi Template: twentyten */ @import url("../twentyten/style.css"); #site-title a { color: #009900; }
Sampai disini, anda sudah memiliki sebuah child themes yang mampu mengubah warna teks header induknya dari hitam menjadi hijau. Untuk mengujinya, coba masuk menu Appearance - Themes
. Disana seharusnya sudah ada sebuah tema baru dengan judul Twenty Ten Boy. Tentu saja, namanya akan beda jika anda menggunakan nama lain di Theme Name.
Coba aktifkan tema itu dan lihat blog anda. Seharusnya sekarang judul blog anda sudah berubah warna menjadi hijau. Sudah paham kan? Anda bisa mengubah-ubah warna tema yang lain sesuka hati.
Twenty ten memungkinkan kita untuk mengganti gambar header dan background. Akan sangat aneh kalau kemudian warnanya gak cocok dengan teks bukan? Nah, trik ini bisa anda gunakan untuk mengutak-atik warna tema anda.
Mengatur Functions.php
Ada kalanya kita ingin memasukkan kode-kode di functions.php. Misalnya kode untuk Menghapus Auto Link Komentar seperti yang pernah saya jelaskan di artikel yang lalu. Untuk memasukkan fungsi-fungsi baru, anda cukup membuat file baru dengan nama functions.php dan isilah dengan fungsi-fungsi tambahan yang anda inginkan. Gampang banget kan?
Fungsi lama yang ada di themes induk akan tetap dijalankan. Jadi, anda tidak perlu melakukan impor maupun mengcopy paste kodenya. Anda hanya perlu menambah saja.
Mengatur File Themes lain
Untuk berkas-berkas tema yang lain, anda tinggal copy paste dari berkas aslinya lalu modifikasi sesuka hati. Misalnya anda mau memasukkan kode banner di single.php agar muncul banner sebelum atau setelah artikel anda dimuat, maka anda cukup copy isi file single.php di theme induk lalu buat lagi file single.php di child themes anda.
Semua file yang anda buat akan dieksekusi dan file yang asli akan diabaikan. Dari sini, anda bisa berkreasi dengan sesuka hati.
Nah, mudah-mudahan anda cukup mengerti bagaimana membuat child themes. Informasi lebih lengkap, bisa anda baca disini.
26 replies on “Membuat Child Themes”
Pake twentyten child asik juga ternyata ya mas lutvi, kustom tanpa harus ganggu theme induknya
Masih belum paham maksudnya 🙁
(Selanjutnya, anda perlu mengimpor CSS dari themes induk dan kemudian menempatkan kode-kode CSS yang perlu anda modifikasi), ini apa maksudnya kode yang diperlukan untuk modifikasi saja ya yang ditulis, sedangkan kode yang gak dimodifikasi gak usah ditulis. Trim’s
Oy om ada gak referensi free video untuk belajar modifikasi theme wordpress, selama ini baru belajar modif blogspot (video dari choen). sekali lagi terimakasih
Iya, kan kode yang pertama adalah kode untuk mengimpor CSS induk, kemudian yang dibawahnya adalah kode modifikasinya
masih belum bisa untuk Functions.php, kalo untuk cssnya udah bisa, bisa kasih contoh Om. setelah liat2 child theme di Om Zam masih belum paham untuk mengatur file Functions.php padahal yang mau diatur image header, please help me 🙁
belum bisanya gimana?
Mengatur file Functions.php untuk child themenya, ada contohnya gak ya
Agan lutvi saya ada pertanyaan tolong di jawab ya….. 🙂
saya mau membuat tampilan halaman awal web saya polos, tanpa ada header, menu dll kecuali gambar dan satu tombol “enter site” di tengah2 nya, pas visitor click tombol tsb langsung menuju halaman awal web saya sekarang. Apakah bs menggunakan child theme ini???
terima kasih atas respon nya…
Bisa, tapi ribet bikinnya 🙂
sample scriptnya dong…..
Maaf pak..Setelah saya ikuti langkah di atas..”Tidak ada perubahan yang terjadi” terima kasih..Mohon pencerahannya…
bagi yang belum bisa, mungkin ini bisa membantu. http://wptutsplus.s3.amazonaws.com/022_ChildThemeWTwenty11/child-theme/twentyeleven-child.zip tadi ane guugling nemuin itu…dari web wp . tutsplus .com
Halo, terima kasih untuk tutorialnya.
Mau tanya,
1. Kalau misalnya seluruh isi style.css dari parent saya copy ke child style.css apakah akan ada pengaruh?
2. Untuk file funcion.php, footer.php dll, apakah perlu saya tambahkan:
/*
Theme Name: Twenty Ten Boy
Theme URI: http://contohaja.com/
Description: Diskripsi Anak Tema
Author: Nama Anda Disini
Author URI: http: //contohaja.com/about/
Template: twentyten
Version: 0.1.0
*/
Terima kasih.
Ribet, pak. Kalo functions.php-nya gimana yaa, saya takut kalo jadi error nantinya
Makasih mas,,
mau nyoba dulu eh hostingnya lagi error -_-
oh ini yang namanya child themes. baru tahu sebutannya hehe :), padahal sering melakukan ini
ternyata gini toh cara buat child theme, hehe akhir tahu juga cara nya thanks min
regards,
cemoro alit
Hari ini update theme hueman, Eh, malah blog jadi berantakan, ketikkan kata kunci di google “apa itu child theme?” dan nyasarnya kesini. Ternyata blognya master. Fokus dolo, ada satu ilmu yang harus dipelajari. Yaaa.. ijin belajar child theme disini mas lutvi.
Berarti file yang tidak diedit gak usah dimasukkan ke folder tema child? Yang dimasukkan cuma yang butuh saja?
I just want to tell you that I’m newbie to blogging and certainly enjoyed this web page. Almost certainly I’m want to bookmark your website . You actually come with awesome articles and reviews. Regards for sharing with us your web site.
Hey There. I found your blog using msn. This is a very well written article. I’ll make sure to bookmark it and return to read more of your useful info. Thanks for the post. I will certainly return.
In contrast, Focus on produced people a component of their discourse crew in order to pattern the dialogue around them as an alternative for his or her self
I similar to the helpful data you bestow in your articles. I’ll bookmark your blog and ensure over here repeatedly. I’m fairly assured I will discover several original ram right here! Clear good fortune for the next!
I was suggested this blog by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my difficulty. You are incredible! Thanks!
Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a little bit, but other than that, this is wonderful blog. An excellent read. I will definitely be back.
I really like looking through a post that will make men and women think. Also, many thanks for allowing me to comment!
Pretty nice post. I just stumbled upon your weblog and wished to say that I have truly enjoyed surfing around your blog posts. In any case I will be subscribing to your feed and I hope you write again very soon!