Tutorial Membuat Child Theme WordPress, child theme atau tema anak merupakan sebuah fitur yang sangat membantu dalam hal pengembangan website berbasis wordpress. Sebab dengan adanya child theme ini kita bisa dengan bebas memodifikasi sebuah tema tanpa perlu takut hasil modifikasi kita ter-replace atau tertimpa ketika tema yang kita kembangkan melakukan update.

Dengan updatenya tema yang kita gunakan tentu akan menghapus kode-kode yang kita tambahkan kedalam file-file tema, karena konsep update yang digunakan WordPress adalah mengganti baru, jadi file-file lama akan terhapus secara otomatis ketika terdapat file baru dengan nama yang sama ditempat yang sama.

Dan child theme adalah solusi agar file yang kita edit tidak terhapus saat melakukan update.

Apa Itu WordPress Child Theme

Child Theme adalah sebuah fitur yang diberikan oleh WordPress dan diperuntukkan bagi Anda yang ingin mengedit / mengkustomisasi tema WordPress tanpa perlu membuat tema wordpress dari awal.

Dengan child theme anda dapat membuat tema persis seperti tema parentnya. Tema parent adalah tema utama yang akan kita buatkan child theme. Mungkin akan lebih mudah dimengerti ketika kita praktekkan.

 

Cara Membuat Child Theme Pada WordPress

Untuk membuat child theme pada wordpress sebenarnya sangatlah mudah hal pertama yang perlu Anda lakukan adalah membuat sebuah folder baru di dalam folder /wp-content/themes.

Pertama, pilih theme yang ingin Anda jadikan parent theme. Dalam contoh ini kita akan menggunakan theme twentytwenty bawaan wordpress.

Lalu sebuah folder baru dengan nama twenty-child (namanya bebas).

 

Kemudian buat dua file di dalam twenty-child:

• style.css
• functions.php

Mendaftarkan Child Theme pada WordPress

Diawal kita sudah membuat folder dan dua buah file di dalamnya, tapi langkah tersebut belum membuat child theme kita terdaftar diwordpress sehingga di menu Appearance > Themes child theme kita tidak akan ditemukan.

Agar child theme kita terbaca adalah dengan mengiisi file style.css dengan script dibawah ini:

/*
Theme Name: Twenty Child
Theme URI: https://hostingan.id/
Description: belajar membuat child theme.
Author: Hostingan WP Dev
Author URI: https://hostingan.id/
Template: twentytwenty
Version: 1.0
*/

Diatas adalah script wajib yang harus Anda tulis agar child theme wordpress anda dapat dibaca atau dikenali oleh WordPress.

Dan perhatikan Template: twentytwenty, kode tersebut merupakan sebuah tanda bawah kita sedang membuat child theme dari folder twentytwenty, jika Anda ingin membuat child theme dari theme lain maka gantilah dengan nama folder lain yang Anda inginkan.

 

Mendaftarkan CSS Parent Theme Pada Child Theme WordPress

Langkah berikutnya adalah menambahkan file CSS dari tema utama atau parent theme, karena secara  default file css parent tidak otomatis di load, sehingga kita perlu menambahkannya secara manual.

Caranya, buka file functions.php dan tuliskan kode berikut:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

Selain css parent kita juga harus menambahkan css child theme itu sendiri agar kita bisa mengubah atau memodifikasi child theme kita.

 

Menambahkan Gambar Theme pada Child Theme WordPress

Baik, mungkin Anda bertanya kenapa di halaman menu Appearance > Themes, child theme kita tidak memiliki gambar seperti tema yang lain?

Yap, karena child theme kita belum memiliki file screenshot.png dimana file tersebut akan diambil dan ditampilkan di halaman themes sebagai thumbnail child theme kita.

Buatlah file screenshot.png dengan dimensi 1200x900px, isi saja sesuai keinginan Anda.

 

Mengaktifkan Child Theme

Untuk mengaktifkannya cukup mudah, Anda tinggal pilih child theme yang sudah dibuat dan klik Active.

 

Mengedit Child Theme

Untuk mengedit, Anda dapat melakukannya secara langsung melalui file functions.php, misalkan Anda ingin menambahkan kode Google Analytics di Website Anda.

Buka Appearance > Theme Editor, pilih Theme Functions (functions.php), lalu tambahin kode ini di paling bawah.

function add_google_analytics() {
?>
<!– Google Analytics –>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXX-Y’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>
<!– End Google Analytics –>
<?php
}

add_action(‘wp_footer’, ‘add_google_analytics’);

Kemudian klik Save.

 

Demikian cara membuat child theme wordpress, child theme ini cocok untuk Anda yang ingin mengotak atik theme wordpress Anda agar bisa menjadi theme yang benar-benar cocok dengan kebutuhan website Anda.