Cara Membuat Themes WordPress Sendiri dengan Child Themes

Cloud Hosting Terbaik Indonesia

Cara membuat themes WordPress sendiri ada banyak metode, bisa dengan menggunakan sebuah child themes (paling direkomendasikan WordPress bagi pemula), bisa dengan starter themes (blank themes) atau juga menggunakan themes framework bagi yang sudah pengalaman. Pembukaan artikel ini saya akan menyampaikan sekilas tentang ketiganya, lalu nantisaya akan menulis lebih lengkap tentang cara membuat themes WordPress sendiri dengan child themes saja.

3 Cara Membuat Themes WordPress Sendiri

1. Membuat Themes WordPress dengan Child themes

Ini adalah cara membuat themes WordPress sendiri yang paling cepat, karena yang perlu anda pelajari hanya bahasa pemrograman CSS. Sangat efektif bila anda ingin mengadakan perubahan pada design themes seperti warna, model huruf, dan layout misalnya. Walau tidak menutup kemungkinan anda juga bisa menyembunyikan beberapa elemen yang dirasa tidak ingin ditampilkan. Keunggulan child themes adalah jika themes WordPress induk diupdate maka perubahan design kita tidak akan terpengaruh.

2. Membuat Themes WordPress dengan starter themes/blank themes

Setelah anda mencoba menggunakan child themes, giliran anda mengupdate pengetahuan dengan menggunakan starter themes. WordPress starter themes biasanya themes yang sudah bisa bekerja dengan baik, hanya saja sangat minim sentuhan html dan CSS, jadi themes ini hanya menghasilkan ‘konten’ saja. Tugas kita sebagai developer nantinya adalah membungkus konten ini dengan wrapper seperti div dan sebagainya plus menambahkan design dengan CSS. Underscores adalah themes favorit saya untuk kategori ini.

3. Membuat Themes WordPress dengan Themes Framework

Kalau anda sudah paham dengan kebiasaan WordPress dan themes bekerja sama menampilkan blog/website, sudah pernah mendengar dan melihat code tentang filters dan hooks, saatnya kita naik kelas dengan menggunakan WordPress Themes Framework. Themes framework seperti Thematic (sudah tidak didevelop) Hybrid adalah free WordPress themes Framework paling populer. WPKamt.com juga menggunakan sebuah themes Framework premium, Genesis Framework.

Cara Membuat Themes WordPress Sendiri dengan Thematic Child Theme

Cara membuat themes WordPress sendiri dengan child themes kali ini hanya tentang bagaiamana memulainya. Termasuk update data themes, customisasi layout dan cara styling di default.css.

Folder sebuah child themes berada satu tempat dengan folder themes induk, seperti yang terlihat dalam thematic child theme berikut, berada dalam folder themes, sama dengan thematic;

Cara Membuat Themes WordPress Sendiri - Thematic Child

1. Edit Informsai theme dari style.css

Hal pertama yang perlu (tapi tidak wajib) anda lakukan adalah mengubah data child themes anda denga membuka style.css di folder child themes;

/* 
Theme Name: A Thematic Child Theme
Theme URI: http://thematictheme.com/
Description: Use this theme to start your Thematic Child Theme development.
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: white, three-columns, two-columns, fixed-width, theme-options, left-sidebar, right-sidebar, threaded-comments, sticky-post, microformats
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
The Thematic Theme is copyright Ian Stewart http://themeshaper.com/
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).
*/

Yang membedakan themes induk dan child themes adalah adanya field Template: thematic yang menyatakan themes induknya terletak dalam folder thematic.

2. Impor style theme induk

Selanjutnya kita akan menentukan style themes induk mana yang akan diimpor. Secara default akan ada beberapa stylesheet yang akan diimpor seperti reset, typography, images, layout dan plugin. Yang paling berpengaruh terhadap kustomisasi design kita adalah layout dan elemen. Daftar  layout yang tersedia dalam folder /library/layouts/milik theme thematic.

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

3. Kustomisasi styling di default.css

Sedang untuk elemen diimpor dari default.css seperti berikut;

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

Kustomisasi bisa dilakukan dengan dua cara; 1). menuliskan design kita dibawah @import seperti di atas, 2). meng-copy isi file asli disini lalu merubahnya langsung.

Cara pertama lebih mudah untuk memantau perubahan apa saja yang telah kita lakukan. Karena yang ada dalam file default.css ini hanya editing yang kita buat.

4. Kustomisasi menambah elemen HTML

Kalau ingin memberi kustomisasi yang menghasilkan output HTML seperti breadcrumb yang ada di atas judul posting ini bisa dengan memberikan filters, hooks (lebih advanced). Cara kedua adalah dengan mengcopy file single.php lalu menambah breadcrumb setelah thematic above content seperti berikut;

<?php
 // action hook for placing content above #content
 thematic_abovecontent();
 if ( function_exists('yoast_breadcrumb') ) {
 yoast_breadcrumb('<p id="breadcrumbs">','</p>');
 }

Penutup

Saya tahu cara membuat themes WordPress sendiri dengan menggunkan child themes ini masih sangat basic, tapi saya berharap artikel ini bisa menjadi arahan bagaimana untuk memulai.

Sesuai dengan pembukaan artikel, saya akan menulis artikel tentang membuat themes wordpress sendiri dengan starter theme dan theme framework secara lebih mendetail.

Yuk Bagikan:

37 pemikiran pada “Cara Membuat Themes WordPress Sendiri dengan Child Themes”

    • Mengaktifkan child theme akan sama dengan mengaktifkan theme pada umumnya, Child theme akan terlihat sebagai themes juga dalam /wp-admin/themes.php cuman dibawahnya biasanya ada keterangan seperti: \”Tema anak ini membutuhkan tema induknya, Thematic.\”

      Balas
  1. Ditunggu mas untuk artikelnya membuat themes wordpress sendiri dengan starter theme dan theme framework secara lebih mendetail. terimakasih

    Balas
  2. Yosh, thank udah share. Bagaimana cara mengimport file selain style.css? Misalnya saya mau import single.php function php, agar bisa diubah lewat child theme..

    Balas
    • Secara default semua file yang ada di folder parent themes digunakan WordPress untuk menampilkan blog kita, kecuali jika kita membuat file baru misalnya single.php di folder child themes, file ini yang akan dipakai bukan file dari parent themesnya. Jadi kalau mau merubahnya, ya tinggal copy file tersebut saja ke folder child themes kita, baru kita rubah.

      Balas
      • nyambung dari pertanyaan di atas, mngkin gni, klau di style.css kan ada keterang tdi @import jadi keliahatn kalau parent theme nya yg mn, nah kl misal fucntion.php caranya gmn?
        mksudny koq bs tau function.php yg baru di folder child ini, kl induknya theme tertentu.
        sy jg mau edit yg di function.php
        trims..

        Balas
        • WordPress memang sudah didesign seperti ini oleh para developer utamanya, jadi kalau ada file functions.php di themes child dan juga themes induk, maka secara otomatis kedua file tersebut akan di load. Dengan ketentuan semua function yang ada di functions.php dalam folder child themes mampu menggantikan functions yang ada di themes induk.

          Balas
  3. Kemarin mencoba menggunakan plugin One-Click Child Theme, tapi malah bingung. Setelah baca artikel ini, tambah yakin untuk mencobanya. Trims mas, smoga tambah sukses..

    Balas
  4. Mas mau tanya, saya kan sudah pakai theme wp tp belum memakai template child di dalamnnya, gimana caranya untuk merubah yg dulunya ga ada childnya terus di kasih child 🙂 thanks

    Balas
    • Sebenarnya child themes itu tidak wajib, dan kalau mau buat child themes tinggal kita buat satu folder baru di dalap folder wp-content/themes. Di dalam folder itu kita beri file style.css lalu melakukan beebrapa langkah dari nomor 1-3 di atas.

      Balas
  5. maaf mas numpang nanya.
    saya baru saja membeli theme wp premium, tetapi belum sy gunakan smpe skrng krn trnyata ada bagian yg tdk sy sukai. pertanyaannya:
    apakah kita bisa mengedit theme premium? kalo bisa apakah hrus melalui child theme nya juga? bagaimana kalo nggak ada child theme nya?
    maaf mas klo bnyk pertanyaan, soalnya newbie banget

    Balas
    • Sangat boleh lah mas, wong sudah dibeli masak tidak boleh dibeli, kalau bisa coba tanyakan ada child theme dari developernya apa nggak, kalau nggak bisa dibuat sendiri, dengan membuat style sendiri sudah bisa merubah tampilan menurut yang kita sukai.

      Balas
    • Ini baru basic mas, pertanyaannya kurang jelas, karena themes yang mas pakai apa tidak disebutkan, padahal ada puluhan ribu themes di luar sana. Lebih baik cari themes yang paling mudah diganti – ganti saja agar mudah buat mengcustomisasi.

      Balas
  6. Mas pengen nanya nih, kalo bikin tema pake Child udah responsive belum? Misalnya udah pake bootstrap atau kita yang harus masukin bootstrap sendiri?

    Balas
    • Child themes bisa mengguanakan style dari parent themes secara default kalau tidak memiliki style sendiri. Jadi juga tergantung dari parent themesnya. Kalau kita menghendakinya tapi parent themes tidak responsive harus ditambahkan sendiri ke child themes. Semoga berkenan.

      Balas
  7. Pengetahuan baru nih, saya baru tahu tentang tematic dan hybrid, pengen coba tapi sepertinya menyeramkan kalo yang free begini, jarang diupdate akhirnya web kena hack mulu. Jangankan free theme, ane beberapa kali beli theme dari developer kecil di themef*rest aja kena hack mulu, kaga diupdate2 sama mereka, walau banyak backdoor simple yang hacker abal2 juga bisa tembus, dan udah di caci maki di kolom komentar. Jadinya malas harus cek semuanya, mendingan yang best seller disana, update rutin. (Jadi curhat 😛 )

    Lagi pengen coba frameworks biar simple and clean tampilannya, soalnya theme2 di themeforest terlalu \”centil\” gitu, banyak feature ngga kepake, dan banyak sampah yang harus dibersiin, lama2 jadi males. hahahah… keputusan final saya coba Genesis 🙂

    Balas
    • Sebenarnya kedua framework itu bisa dibilang bukan sembarang framework untuk kelas free themes framework. Karena kedua developer intinya bekerja di Automattic, perusahaan dibalik WordPress itu sendiri.

      Bahkan Thematic merupakan salah satu themes yang menjadi bahan belajar banyak theme shop yang sekarang ada. Sayangnya sekarang sudah tidak update lagi thematic framework.

      Nah untuk Hybrid, sekarang saya melihat komunitasnya makin besar saja, makin banyak pengembangan child themes dari member yang terdaftar di sana. Lebihnya lagi, Justin Tadlock juga anggota theme review di WordPress.org, tim ini bertugas untuk memeriksa kualitas dan keamanan themes yang disubmit oleh developer ke direktori resmi tema WordPress. Jadinya tidak diragukan lagi kalau themes yang ada di website themehybrid.com adalah themes yang berkualitas.

      Saya sendiri sekarang juga memilih membeli themes profesional, karena tidak ada waktu untuk belajar lagi. Genesis framework adalah pilihan utama saya selain mythemeshop dan GeneratePress.

      Balas

Tinggalkan komentar