Cara membuat child theme WordPress

Cara membuat child theme WordPress

PERINGATAN: postingan ini bukan mengajarkan bagaimana caranya membuat anak ya, tolong dibedakan..:D

Apa kabar kalian semua WP mania?

Semoga kalian semua dalam keadaan sehat karena kabar saya hari ini tidak begitu baik.
Saya agak sedikit stress dengan proyek yang sedang saya kerjakan sehingga kesehatan saya sedikit terganggu..*weekend kelabu

Tetapi kondisi ini tentunya tidak akan bisa menghalangi saya untuk bisa menyapa kalian semua dan sedikit berbagi tentang apa yang saya tau.

Nah, dalam kesempatan ini saya ingin memberikan tutorial bagaimana caranya membuat child theme WordPress.

Kenapa sih kita harus pakai child theme atau kenapa tidak langsung saja parent theme yang kita pakai kita edit dan costumize?

Pertanyaan bagus. Jawabannya adalah supaya bila ada upgrade WordPress atau upgrade theme, theme yang sudah kita costumize sedemikian rupa tidak berubah kembali ke awal.

Sebelumnya harus kamu catat kalau mau mengaktifkan child theme, theme parentnya juga harus ada di directory WordPress kita.

Dalam tutorial ini, contoh parent theme yang kita pakai adalah twenty twelve. Dan semua coding akan kita lakukan melalui file manager di cpanel.

1. Masuk ke directory wp-content > theme. Buatlah folder baru untuk child theme yang mau kita buat. Sebagai contoh saya akan buat folder “twentytwelvered”.

2. Hanya satu file yang dibutuhkan oleh child theme untuk bisa eksis, dan file tersebut adalah style.css. Caranya, buatlah file baru dan save dengan nama style.css di folder child theme kita.

3. Edit file style.css yang sudah kita buat. Tambahkan code berikut di dalamnya:

/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Twelve theme
Author: Your name here
Author URI: http://example.com/about/
Template: twentytwelve
Version: 0.1.0
*/

Semua informasi dari code diatas bisa diubah-ubah terserah kita saja. Tapi yang tidak boleh dirubah adalah bagian “Template: twentytwelve”. Bagian ini haruslah diisi dengan nama folder parent theme yang kita pakai, dan kebetulan parent theme yang kita pakai buat contoh dalam postingan ini bernama twentytwelve.

Theme Name: nama dari child theme kita (harus diisi).

Theme URI: web tempat child theme kita bisa ditemukan (opsional).

Description: Deskripsi dari child theme kita (opsional).

Author URI: Web dari author child theme yang kita buat (web kita).

Author: Nama pembuat theme kita).

Template: Folder parent theme (harus diisi)

Version: versi dari child theme yang kamu bikin (opsional)

Jadi setelah diedit, file style.css kita akan jadi seperti dibawah:

/*
Theme Name: Twenty Twelve Red
Theme URI: http://jujubandung.biz.com/
Description: red child theme twenty twelve
Author: jujubandung
Author URI: http://jujubandung.wordpress.com/
Template: twentytwelve
Version: 1.0
*/

4. Setelah kita melengkapi code style.css diatas, save file. Sekarang masuk ke dashboard WP, klik Appearence > Themes. Nah kamu sekarang bisa melihat theme yang kamu buat muncul dibagian sini.

5. Sebelum child theme yang kita buat bisa berfungsi, dia harus mewarisi semua setingan dari parentnya. Caranya adalah dengan menambahkan sedikit coding berikut pada file style.css child theme kita:

@import url("../twentytwelve/style.css");

Code diatas menyuruh child theme untuk mengimpor semua setingan style.css dari parent themenya.

6. Setelah menambahkan kode diatas, save file. kembali ke dashboard WP. Klik Appearence > Themes, Sekarang child theme kamu sudah bisa diaktifkan deh.

Demikianlah sharing saya kali ini, semoga kita bisa bertemu kembali dilain waktu.

Advertisements

2 thoughts on “Cara membuat child theme WordPress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s