Membuat Child Theme WordPress

Membuat Child Theme WordPress

Salah satu kelebihan menggunakan CMS, khususnya wordpress adalah user dengan mudah mengganti-ganti theme dan memodifikasinya sesuai dengan keinginan. Namun sialnya, setelah kita menghabiskan banyak waktu dan tenaga untuk memodifikasi dan mengedit-edit code dalam theme, semua hasil editan tersebut harus kembali ke standar pada saat theme di update. Karena tiap kali theme di update, maka semua code dalam theme akan kembali ke default.

Secara singkat, child theme adalah metode yang digunakan untuk memodifikasi atau mengedit-edit code yang ada dalam theme sehingga membuat tampilannya seperti yang diinginkan. Tidak perlu khawatir karena walaupun theme diupdate, modifikasi yang anda buat tidak akan terhapus, karena pada dasarnya, kita tidak mengotak-atik sama sekali isi theme yang digunakan situs wordpress.

Umumnya, untuk membuat sebuah perubahan tampilan pada theme, maka anda akan menuju file yang berada dalam folder theme yang akan diubah. Tapi jika anda menggunakan child theme, maka anda tidak perlu mengedit sama sekali isi folder theme yang digunakan.

Dalam tutorial ini, saya menggunakan theme “Twenty Fifteen” sebagai contoh. Anda boleh menggunakan theme apa aja sebagai bahan latihan.
Untuk membuat child theme, dibutuhkan 2 file penting yang disimpan dalam 1 folder. Yaitu:

  • style.css
  • functions.php

Didalam wordpress, letak theme yang terinstall berada didalam direktori “wp-content/themes“. Maka theme yang saya gunakan akan terlihat seperti ini:

“/wp-content/themes/twentyfifteen/”

Sekarang buat sebuah folder dengan nama “twentyfifteen-child”. Jika nama folder theme yang anda gunakan adalah “mytheme”, maka buat foldernya dengan nama “mytheme-child”. (nama folder bersifat optional, namun disarankan menggunakan akhiran “-child”). Maka akan terlihat seperti ini:

“/wp-content/themes/twentyfifteen-child/”

Sekarang buka folder twentyfifteen, kemudian copy file “style.css” dan paste-kan ke dalam folder twentyfifteen-child.

Setelah itu buka file “style.css” yang sudah anda copy ke dalam folder twentyfifteen-child, kemudian hapus semua isinya kecuali isi headernya ( umumnya diawali dengan tanda /* dan diakhiri dengan */ ). Adapun header adalah info mengenai theme yang anda digunakan, diantaranya nama theme, author, URL, dll. Tampilannya akan seperti ini:

/*
Theme Name: Twenty Fifteen
Theme URI: https://wordpress.org/themes/twentyfifteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

Yang perlu anda edit adalah:

    • Nama theme (Theme Name). Atau cukup tambahakan text “child”. Misalnya” dari “Twenty Fifteen” menjadi “Twenty Fifteen Child”

.

  • Tambahkan line baru yaitu “Template”. Kemudian hasilnya isi dengan nama folder theme yang dibuatkan child (twentyfifteen)

Selain itu jangan diedit. Maka isi dari “style.css” nya akan seperti ini:

/*
Theme Name: Twenty Fifteen Child
Theme URI: https://wordpress.org/themes/twentyfifteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.

Template: twentyfifteen-child
*/

Save file “style.css”.

Sekarang buka file “functions.php”. Kemudian tambahkan code berikut:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Save file “functions.php” dan child theme twentyfifteen telah jadi.

Sebelum melihat hasil dari child theme yang anda buat, mari kita bikin lebih menarik dengan memasukkan foto anda didalam folder theme child yang anda buat (twentyfifteen-child) :-) . Setelah itu ganti/rename nama foto tersebut dengan nama file “screenshot.png”.

Sekarang silahkan menuju dashboard wordpress, pilih menu “Appearance>>Themes”. Bagaimana hasilnya? Apakah foto anda sudah muncul didalam menu themes? Coba aktifkan theme tersebut (Twenty Teen Child), dan lihat hasilnya akan sama seperti theme aslinya, namun disini anda sudah bebas mengedit dan memodifikasi theme sesuai keinginan anda.

Demikian tutorial ini, semoga bermanfaat.

sign up to our newsletter no spam, ever.promise.