Cara Membuat Child Theme WordPress: Kustomisasi Aman Tanpa Takut Update

WordPress, ELrolumNews — Anda ingin mengubah tampilan tema WordPress—mengganti warna, menambah elemen, atau memodifikasi layout. Tapi setiap kali update tema, semua perubahan Anda hilang. Kenapa? Karena Anda mengedit tema induk (parent theme) secara langsung.

Artikel ini cocok untuk: Anda yang sudah familiar dengan WordPress dan ingin melakukan kustomisasi tanpa takut kehilangan perubahan saat update tema.

Solusinya: Child Theme. Ini adalah tema “turunan” yang mewarisi semua fungsi tema induk, tapi memungkinkan Anda melakukan kustomisasi tanpa mengubah file asli. Saat tema induk di-update, perubahan Anda tetap aman.

Di artikel ini, kita akan bahas dari nol: apa itu child theme, strukturnya, cara membuatnya, hingga teknik lanjutan. Ini tutorial level expert—tapi saya akan jelaskan dengan bahasa yang mudah diikuti.

Apa Itu Child Theme dan Mengapa Anda Membutuhkannya?

Child Theme adalah tema WordPress yang mewarisi semua fitur dari tema lain (disebut parent theme), tapi memungkinkan Anda menimpa (override) bagian tertentu tanpa mengubah file asli.

Analoginya: bayangkan Anda menyewa apartemen (tema induk). Anda tidak boleh membongkar dinding atau mengubah struktur bangunan. Tapi Anda boleh mengecat ulang, mengganti perabot, atau menambah dekorasi—selama tidak merusak bangunan aslinya. Saat pemilik gedung merenovasi (update tema), apartemen Anda tetap utuh.

Mengapa Child Theme Penting?

💡 Tips Pro: Beberapa tema premium (seperti Astra, GeneratePress) menyediakan child theme siap pakai yang bisa langsung diinstal. Tapi tidak semua tema punya—jadi penting tahu cara membuatnya sendiri.

Struktur Dasar Child Theme

Child theme minimal terdiri dari dua file:

Strukturnya:

nama-child-theme/
├── style.css
├── functions.php
└── (file lain sesuai kebutuhan)

Opsional: Anda juga bisa menambahkan file lain seperti header.php, footer.php, atau single.php jika ingin menimpa file tema induk.

Langkah 1: Buat Folder Child Theme

1. Buat folder baru di komputer Anda, beri nama misalnya elrolum-child

2. Folder ini akan menjadi child theme Anda

💡 Tips Pro: Beri nama yang jelas—biasanya [nama-tema-induk]-child. Ini memudahkan Anda mengidentifikasi.

Langkah 2: Buat File style.css

Buat file style.css di dalam folder child theme. Isi dengan:

/*
Theme Name: Elrolum Child
Theme URI: https://elrolum.com/
Description: Child theme untuk Astra
Author: Elrolum
Author URI: https://elrolum.com/
Template: astra
Version: 1.0.0
*/

/* Kustomisasi CSS Anda di sini */

Penjelasan setiap baris:

⚠️ Peringatan: Template harus sama persis dengan nama folder tema induk, bukan nama tampilan. Contoh: tema “Astra” foldernya astra, tema “GeneratePress” foldernya generatepress.

Langkah 3: Buat File functions.php

Buat file functions.php di dalam folder child theme. Isi dengan:

<?php
/**
 * Fungsi child theme Elrolum
 */

// Enqueue style tema induk dan child theme
function elrolum_child_enqueue_styles() {
    // Style tema induk
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
    
    // Style child theme (dimuat setelah parent)
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'elrolum_child_enqueue_styles');

Penjelasan:

💡 Tips Pro: Jika tema induk sudah memuat style-nya sendiri, Anda mungkin tidak perlu memuat ulang. Tapi cara ini aman untuk sebagian besar tema.

Langkah 4: Upload ke WordPress

Sekarang folder child theme siap. Ada dua cara mengunggahnya:

Cara 1: Via FTP/cPanel (Manual)

1. Kompres folder child theme menjadi ZIP

2. Login ke hosting via cPanel > File Manager

3. Masuk ke folder wp-content/themes/

4. Upload file ZIP

5. Ekstrak

6. Hapus file ZIP

Cara 2: Via WordPress (Jika sudah ZIP)

1. Masuk ke Appearance > Themes

2. Klik Add New > Upload Theme

3. Pilih file ZIP child theme

4. Klik Install Now

5. Klik Activate

Langkah 5: Verifikasi Child Theme Aktif

Setelah aktivasi:

1. Masuk ke Appearance > Themes

2. Pastikan child theme muncul dan aktif

3. Buka website—tampilan harus sama seperti sebelumnya (karena mewarisi tema induk)

Jika tampilan berubah, kemungkinan Template di style.css salah.

Langkah 6: Mulai Kustomisasi

Sekarang Anda bisa mulai memodifikasi tanpa takut update. Berikut beberapa contoh:

6.1 Kustomisasi CSS

Di style.css child theme, tambahkan:

/* Ganti warna header */
.site-header {
    background-color: #1a1a2e;
}

/* Ganti font judul */
h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
}

6.2 Menimpa File Tema Induk

Jika ingin mengubah file PHP dari tema induk:

1. Copy file dari tema induk (misalnya header.php)

2. Paste ke folder child theme

3. Edit sesuai kebutuhan

WordPress akan otomatis menggunakan file dari child theme, bukan tema induk.

6.3 Menambah Fungsi Kustom

Di functions.php child theme, tambahkan:

// Menambah ukuran gambar kustom
add_image_size('elrolum-featured', 800, 450, true);

// Menghapus emoji WordPress (opsional, untuk performa)
remove_action('wp_head', 'print_emoji_detection_script', 7);

💡 Tips Pro: Jangan copy semua file tema induk ke child theme. Hanya copy file yang benar-benar ingin Anda ubah. Semakin sedikit file, semakin mudah maintenance.

Teknik Lanjutan untuk Level Expert

1. Enqueue Script Kustom

function elrolum_enqueue_scripts() {
    wp_enqueue_script(
        'elrolum-custom',
        get_stylesheet_directory_uri() . '/js/custom.js',
        array('jquery'),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'elrolum_enqueue_scripts');

2. Menambah Widget Area

function elrolum_widgets_init() {
    register_sidebar(array(
        'name' => 'Sidebar Kustom',
        'id' => 'elrolum-sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
    ));
}
add_action('widgets_init', 'elrolum_widgets_init');

3. Menimpa Template Spesifik

WordPress punya hierarki template. Jika Anda ingin mengubah tampilan halaman tertentu:

• Copy single.php dari tema induk → edit di child theme

• Copy archive.php → edit untuk tampilan arsip

• Copy 404.php → edit untuk halaman error

Troubleshooting: Masalah Umum

⚠️ Peringatan: Sebelum mengedit functions.php, backup dulu. Satu karakter salah bisa membuat website error total.

Kesalahan Umum dan Cara Menghindarinya

Child theme adalah cara terbaik untuk mengkustomisasi WordPress tanpa risiko kehilangan perubahan saat update. Kuncinya:

1. Buat folder child theme — di wp-content/themes/

2. Buat style.css — dengan Template yang benar

3. Buat functions.php — untuk enqueue style

4. Upload & aktifkan — via FTP atau WordPress

5. Mulai kustomisasi — edit CSS, timpa file, tambah fungsi

6. Jangan copy semua file — hanya yang perlu diubah

7. Backup sebelum edit — agar aman

Dengan child theme, Anda bisa bereksperimen tanpa takut. Update tema? Tidak masalah. Ganti tema induk? Tinggal sesuaikan. Semua perubahan Anda tetap aman.

💬 Punya pengalaman dengan child theme? Bagikan di kolom komentar!