Langkah Mudah Membuat Child Theme di Wordpress Tanpa Plugin

WordPress adalah salah satu platform terpopuler untuk membangun dan mengelola situs web. Namun, saat Anda ingin melakukan perubahan pada tampilan dan fungsionalitas situs web Anda, penting untuk menggunakan child theme. Child theme adalah tema turunan yang memungkinkan Anda mengedit tema utama (parent theme) tanpa kehilangan perubahan saat tema utama diperbarui. Dalam artikel ini, kami akan membahas langkah-langkah mudah untuk membuat child theme di WordPress tanpa menggunakan plugin.

Apa Itu Child Theme?

Sebelum kita melangkah lebih jauh, mari pahami apa itu child theme. Child theme adalah tema tambahan yang digunakan untuk mengganti atau menyesuaikan tema utama yang telah ada. Ini sangat berguna jika Anda ingin mengedit tampilan situs web Anda tanpa mengganggu tema utama yang mungkin perlu diperbarui. Saat Anda mengedit tema utama, perubahan tersebut dapat hilang saat tema utama diperbarui, tetapi dengan child theme, Anda dapat membuat perubahan yang aman dan terkendali.

Cara Membuat Child Theme WordPress

Untuk membuat child theme di WordPress hanya diperlukan 3 file: style.css, functions.php, dan screenshot.png.

1. Buat Direktori Child Theme

Langkah pertama adalah membuat direktori (folder) untuk child theme Anda. Anda dapat melakukannya di local atau di komputer Anda, bisa juga langsung membuatnya di cPanel. Saya merekomendasikan opsi yang pertama.

Buat folder dengan nama sesuai child theme yang akan Anda gunakan. Misalnya “langit-child-theme”. Saat penamaan, ada beberapa hal yang perlu diperhatikan:

• Gunakan huruf kecil semua.
• Apabila nama folder terdiri dari dua kata atau lebih, gunakan tanda strip (-) untuk menggabungkannya.
• Tidak menggunakan spasi.

Kemudian buka folder tersebut di code editor .

2. Buat File “style.css” Child Theme

Selanjutnya, dalam direktori atau folder child theme yang telah Anda buat, buat file “style.css”. Nama file-nya harus persis seperti ini.

Pastikan untuk menambahkan informasi header atau documentation block pada file “style.css” ini. Berikut adalah contoh informasi header yang dapat Anda gunakan:

/*
Theme Name: Nama Child Theme Anda
Theme URI: Alamat URL Tema Anda (jika ada)
Description: Deskripsi Child Theme Anda
Author: Nama Anda
Author URI: Alamat URL Anda (jika ada)
Template: nama-tema-utama
Version: Versi Child Theme Anda
*/

Pastikan untuk mengganti “Nama Child Theme Anda” dengan nama yang Anda inginkan dan sesuaikan informasi lain sesuai kebutuhan dan mengganti “Template” sesuai dengan parent theme.

Berikut contoh documentation block saat saya membuat child theme dari GeneratePress.

/*
 Theme  Name       : Bagaspati - GeneratePress Child
 Theme  URI        : https: //generatepress.com
 Description       : Default GeneratePress child theme
 Author            : Langit Amaravati
 Author URI        : https: //tomusborne.com
 Template          : generatepress
 Version           : 1.0.0
*/

3. Buat File “functions.php” Child Theme

Selanjutnya, Anda perlu membuat file “functions.php” dalam direktori child theme. File “functions.php” ini akan digunakan untuk mengimpor gaya (style) dari tema utama dan juga untuk menambahkan fungsi khusus jika diperlukan. Anda dapat mengimpor gaya dari tema utama dengan menambahkan kode berikut di dalam file “functions.php”:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

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

Dengan kode ini, child theme Anda akan menggunakan gaya (style) dari tema utama.

4. Buat File “screenshot.png”

Buat gambar untuk preview tampilan. Ukurannya adalah 880 x 660 px dengan format .png. Masukkan gambar ke dalam folder child theme.

5. Unggah Child Theme

Child theme sudah selesai dibuat. Sekarang, kita hanya perlu mengunggahnya. Tetapi sebelumnya, compress folder ke dalam format .zip. Tidak disarankan menggunakan format lain seperti .rar karena WordPress tidak akan menerimanya. Juga tidak disarankan mengunggah folder tanpa dikompres terlebih dahulu.

6. Aktifkan Child Theme

Setelah Anda telah membuat direktori child theme, file “style.css,” dan file “functions.php,” Anda dapat mengaktifkannya melalui dashboard WordPress. Masuk ke “Tampilan” > “Tema,” dan Anda akan melihat child theme yang telah Anda buat. Aktifkan child theme tersebut.

7. Mulai Mengedit Child Theme

Sekarang, Anda dapat mulai mengedit child theme sesuai keinginan Anda. Anda dapat menambahkan atau mengubah file-file template, gaya, dan fungsi sesuai kebutuhan tanpa mengganggu tema utama.

Apabila Anda ingin menambahkan file ke dalam child theme, ada dua cara: menambahkan langsung di cPanel. “cPanel” > “File Manager” >

Cara kedua adalah dengan menggunakan plugin sehingga Anda dapat langsung menambahkan file di child theme dari dasboard WordPress.

Informasi Tambahan

1. Lebih dari satu child theme

   Anda bisa membuat lebih dari satu child theme dari satu parent theme. Hal yang terpenting adalah nama child theme-nya tidak sama antara yang satu dengan yang lain.

2. Theme customizer

   Konfigurasi apa pun yang Anda buat di customizer, termasuk custom CSS, akan disimpan di child theme.

3. Gunakan localhost

   Untuk Anda para WordPress developer, sebaiknya child theme dites terlebih dahulu di localhost. Termasuk apabila ada kode dan file yang akan ditambahkan. Selain untuk mengurangi risiko konflik di live server, juga lebih mudah untuk menambahkan file.

4. Menambahkan JavaScript

   Selama saya menjadi WordPress developer, hal ini jarang sekali terjadi. But, if you wanna be that guy, Anda bisa menambahkan file JavaScript di child theme lalu enqueue file tersebut di functions.php.

   <?php
   function tambah_script_javascript() {
   wp_enqueue_script('nama-script', get_stylesheet_directory_uri() . '/nama-file-javascript.js', array('jquery'), '1.0', true);
   }
   add_action('wp_enqueue_scripts', 'tambah_script_javascript');
   

Error dan Cara Menanganinya

1. Screenshot tidak muncul

   Gambar tidak muncul/blank. Biasanya karena kita salah menamai file. Pastikan nama file-nya adalah “screenshot” (dengan satu “o”), bukan “screenshoot”.

2. Child theme tidak berfungsi

   Coba cek di style.css, apakah nama template untuk parent theme sudah benar?

Membuat child theme di WordPress adalah langkah yang bijak jika Anda ingin mengedit tampilan dan fungsionalitas situs web Anda tanpa khawatir kehilangan perubahan saat tema utama diperbarui. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat child theme dengan mudah, tanpa perlu menggunakan plugin tambahan. Selamat mencoba dan selamat mengedit situs web Anda. (eL)