Categories
Pengembangan Trik WordPress

Membuat Child Themes

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

  1. File style.css
  2. File functions.php
  3. 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.

By Lutvi

Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

26 replies on “Membuat Child Themes”

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

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 🙁

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…

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.

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.

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.

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.

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!

Comments are closed.