Bagaimana kita membuat child theme untuk web wordpress kita? Kita membutuhkan theme yang custom dan kita membuatnya. Tetapi, saat update, semua bisa hilang tertimpa oleh update baru. Jika tidak ingin ini terjadi, maka sebaiknya kita membuat child theme untuk template kita.

Kecuali kita menggunakan theme dari “Upfront” yang menyimpan perubahan theme di database situs, update membuat perubahan theme lain menjadi hilang dan kembali ke “default” sistemnya.

Apakah child theme wordpress itu?

Child theme wordpress adalah theme turunan yang mewarisi fungsi dari parent theme / theme original.

Jika kita membicarakan mengenai child theme, maka ada yang namanya “parent theme” atau theme originalnya. Hampir semua theme wordpress bisa dibuat child themenya. Namun memang ada beberapa theme yang didesain khusus supaya mudah untuk dibuat child themenya. Misal theme Genesis dari StudioPress.

Child theme bukanlah sebuah theme yang berdiri sendiri. Theme ini sangat bergantung kepada theme originalnya. Theme aslinya harus tetap ada supaya child theme bisa diaktifkan.

Child theme hanya mengganti bagian tertentu yang kita ingin menjadi berbeda.

Faktanya, kita bisa meng-kustom theme kita dan mengganti styling, layout dan fungsi dengan sangat berbeda dibanding theme aslinya.

Keuntungan menggunakan child theme

• Bisa meng-custom theme yang ada tanpa takut menjadi “default” lagi saat diupgrade.
• Waktu “development” theme yang lebih cepat. Kita membangun theme baru dari yang sudah ada dan bukan membangun theme dari baru.
• Untuk theme parent yang lengkap, kita tetap bisa mendapatkan semua kecanggihan dan fungsi yang ada tetapi bisa mengkustom desain sendiri.
• Jika customisasi tidak memuaskan, kita bisa mendisable child theme tanpa ribet dan semua bisa kembali dari awal lagi.
• Child theme dapat berisi mulai dari folder gambar, JavaScript, CSS hingga file – file template atau bahkan file seminimal mungkin.

Yang kita butuhkan dalam sebuah child theme sebenarnya hanya sebuah folder, sebuah stylesheet dan file function.php. Bahkan, kedua file terakhir ini sebenarnya cukup file kosong saja.

Kapan menggunakan child theme?

Apakah setiap perubahan theme memerlukan child theme?

Tergantung perubahan kita. Jika hanya perubahan kecil seperti warna atau font, kita tidak perlu membuat child theme. Child theme hanya kita perlukan jika kita ingin mengoverhaul desain theme kita.

Sekarang, kita membuat child theme menggunakan theme standar wordpress: Twenty Fifteen.

Ada dua cara melakukannya. Pertama kita edit lewat FTP client dan kedua diseting secara manual melalui menu “Theme” di wordpress.

Kita perlu 3 hal yang kita buat terlebih dahulu: sebuah folder, style sheet dan function.php.

Folder kita buat di direktori wp-content/themes. Yang paling gampang, kita beri nama Twentyfifteen-child sesuai nama theme parentnya.

Membuat style sheet

Sebuah theme sebenarnya memiliki banyak style sheet. Tetapi saat ini kita membuat satu dahulu yang kita perlukan.

Kita buka notepad (untuk windows) dan paste kode milik wordpress berikut:

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
description: >-
Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

Save sebagai “style.css” dan selesai.

Kode diatas disebut sebagai “style sheet header” dan bisa kita temukan di wordpress codex.

Apa saja yang tertulis disana:

Nama theme / template: Nama yang muncul di backend wordpress.

URL theme: URL ini akan menuju lokasi website theme bersangkutan atau halaman demonya. URL theme atau URL milik pembuat theme harus ada disini supaya theme bisa diterima di direktori wordpress.

Description: adalah deskripsi yang dimunculkan saat kita meng-klik “Theme Detail.”

Author: nama pembuat theme.

Author URL: Kita bisa memasukkan link website kita jika dibutuhkan.

Template: nama parent theme yang kita gunakan. Nama ini “case sensitive” dan jangan salah ketik. Jika salah maka akan error.

Version: versi child theme kita.

Lisence: untuk lisensi GPL, gunakan lisensi yang sama denga lisensi parent theme kita.

Lisence URL. Menuju ke halaman yang menerangkan lisensi kita. Gunakan yang sama dengan yang digunakan theme parent.

Tags: tags membantu orang lain menemukan theme kita di direktory wordpress. Gunakan beberapa tags yang relevan.

Text Domain: Bagian ini digunakan untuk internasionalisasi dan membuat theme kita bisa diterjemahkan. Bagian ini sebaiknya dibuat supaya sesuai dengan “slug” template kita.

Jika Anda merasa ribet, tidak masalah. Semua informasi itu hanya diperlukan jika Anda ingin mempublish theme Anda. Jika tidak, maka hanya ini yang kita perlukan:

/*
Theme Name: Twenty Fifteen Child Theme
description: >-
A child theme of the Twenty Fifteen default WordPress theme
Author: Lawang Techno
Template: twentyfifteen
Version: 1.0.0
*/

Setelah folder dan style sheet jadi, coba kunjungi “Appearance” –> “Themes” dan child theme kita bisa ditemukan disana.

Jika kita klik tombol “Activate,” maka kita akan temukan website kita seperti ini:

Layout website yang berbeda dari aslinya ini karena kita belum menggunakan styling untuk website kita. Kita perlu membuat stylingnya.

Tetapi, sebelumnya kita perlu file yang disebut functions.php.

functions.php adalah file yang secara fundamental mengubah tampilan dan karakter sebuah website wordpress.

File ini mengijinkan kita menambah fungsi dan styling untuk website wordpress kita. function.php bisa berisi kode program PHP atau native milik wordpress.

Selain itu, kita bisa membuat kode milik kita sendiri.

Cara membuatnya:

Buka notepad, save sebagai function.php dan paste kode berikut:

<?php
//* tempatkan kode Anda disini.

Betul, cuma itu saja sudah cukup sebenarnya.

Sebenarnya, kita juga tidak harus menggunakan kode function.php ini, lho?

Yah, jika kita hanya ingin mengganti style dengan style sheet saja tanpa mengganti style dengan PHP. Kita tidak perlu file ini.

Tetapi, langkah dasar ini lebih baik kita ketahui dan juga karena adanya langkah berikut:
Kita meng – enqueue style milik parent theme.

Caranya, kita tambahkan kode berikut di awal function.php:

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}

kemudian save.

Setelah web kita buka, hasilnya menjadi sama dengan theme parentnya:

Nah, kini semua desain dan layout sudah sama dengan theme parent atau theme originalnya.

Untuk tutorial membuat child theme wordpress, sudah selesai sampai disini. Tetapi, mungkin Anda ingin mendapatkan tutorial meng-custom child theme Anda. Jika begitu, silahkan tunggu posting berikutnya…

Sampai jumpa.