Yasin K Yasin K is a Technical Content Writer for Niagahoster Blog. Other words are unimportant things you will never need to know. Let the content speak for itself :)

Cara Membuat Child Theme WordPress

5 min read

Apakah Anda ingin membuat child theme di WordPress?

WordPress mempunyai banyak tema yang menarik, tapi terkadang Anda tertarik untuk mengubahnya; warna, ukuran font, atau bahkan mengubah tombol call to action. Salah satu cara yang paling aman untuk memodifikasi tema di WordPress adalah menggunakan Child Theme. Pada artikel ini kami akan menunjukkan kepada Anda bagaimana cara membuat Child Theme WordPress sesederhana mungkin.

Mengapa Anda Harus Menggunakan Child Theme?

Child Theme memungkinkan Anda untuk menggunakan atau memodifikasi tema utama tanpa harus mempengaruhi kode yang ada di tema utama. Jadi Child Theme adalah sebuah tema dalam bentuk sub-theme berdasarkan karakteristik dari tema utama.

Ketika Anda menggunakan Child Theme di WordPress, segala pengubahan yang Anda lakukan di Child Theme akan mempengaruhi tema utama dan ketika Anda menghapus Child Theme, tema utama akan kembali ke semula.

Child theme seharusnya Anda gunakan saat berencana memodifikasi tema bahkan ketika hanya memodifikasi satu karakter di tema utama. Ada dua alasan yang harusnya Anda pertimbangkan: pembaruan (update) dan ogranisasi.

Update

Jika Anda memodifikasi tema tanpa menggunakan Child Theme, Anda memiliki dua pilihan: Anda dapat memilih untuk tidak memperbarui (update) tema, atau tetap memperbarui tema dengan resiko kehilangan segala kustomisasi di dalam tema utama.

Opsi terakhir mungkin saja dapat Anda ambil, tapi opsi tersebut tidak direkomendasikan untuk dilakukan. Kenapa? Meskipun pengubahan yang dilakukan hanya satu atau dua karakter di tema utama, tetapi setelah melakukan update, Anda harus melakukan modifikasi tema utama lagi. Hal ini akan memakan waktu meskipun hanya satu atau dua karakter saja.

Namun jika Anda tidak memperbarui tema Anda, akan muncul banyak resiko. Salah satu resiko tidak memperbaharui tema adalah masalah keamanan. Tema yang tidak pernah diperbarui rentan terhadap serangan hacker.

Organisasi

Di dalam pengembangan bersama, Anda dan tim pasti akan menambahkan kode ke tema yang ada, yang mungkin ribuan baris. Saking banyaknya baris kode yang ditambahkan, Anda dan tim kemungkinan akan kesulitan melacak perubahan Anda.

Ketika Anda menggunakan Child Theme, Anda akan membuat direktori baru yang masih kosong sehingga Anda bisa membaca dan menambahkan baris kode maupun file dengan lebih jelas. Meskipun Child Theme hanya mengandung beberapa file saja, tapi dapat menghasilkan perubahan yang besar pada tema utama.

Jadi Child Theme cocok bagi Anda yang bekerja sebagai developer atau pengguna WordPress yang sedang belajar bagaimana cara untuk memodifikasi tema WordPress. Ketika pengubahan yang Anda lakukan tidak sesuai dan ingin mengambalikan ke versi semula, Anda dapat melakukannya dengan mudah. Cukup hapus Child Theme dan tampilan website Anda akan kembali ke versi tema utama yang asli.

Baca juga: Cara Membuat Template WordPress Responsive HTML5

Cara Kerja Child Theme

Child Theme berada di direktori yang berbeda dengan tema utama. Supaya Child Theme dapat berfungsi dengan normal, setiap direktori Child Theme harus memiliki file style.css dan functions.php. Selain kedua file ini, Anda dapat menambahkan file tambahan yang dikustomisasi sesuai dengan kebutuhan.

File .css dan .php di direktori Child Theme membuat Anda dapat memodifikasi apapun mulai dari styling dan parameter layout hingga mengubah dan menambahkan baris kode.

Ketika pengunjung mengakses website, WordPress pertama kali akan memuat Child Theme terlebih dahulu. Kemudian WordPress menurunkan style dan fungsi dari tema utama untuk melengkapi Child Theme.

Hasilnya, mayoritas pengaturan akan mengambil dari tema utama namun sudah dimodifikasi oleh Child Theme sebelum akhirnya dikirimkan ke browser.

Hal yang Dibutuhkan Untuk Membuat Child Theme

Membutuhkan dasar CSS/HTML supaya Anda dengan mudah dapat mengubah tema sesuai dengan yang diinginkan. Beberapa pengetahuan tentang PHP juga sedikit banyak akan membantu. Jika Anda tidak paham cara menuliskan baris kode, Anda dapat melakukan copy dan paste baris kode dari sumber lain, Anda juga harus mempunyai:

  1. Akses ke halaman admin WordPress
  2. Akses ke File Manager atau Aplikasi FTP

Baca juga: 5 Plugin WordPress Page Builder Terbaik

Cara Membuat Child Theme WordPress dan Mengkustomisasi

membuat child theme wordpress

Membuat Child Theme cukup mudah karena Anda hanya tinggal copy dan paste dari beberapa bagian tema utama yang sudah ada. Selain itu proses modifikasi juga cukup sederhana jika Anda sudah pernah belajar menggunakan CSS, HTML, dan PHP.

Langkah 1 – Membuat Child Theme WordPress

Anda harus mengakses direktori WordPress terlebih dahulu menggunakan File Manager atau Aplikasi FTP. Setalah Anda berhasil masuk, buat direktori Child Theme di dalam folder “../wp-content/themes”.

Pastikan di dalam membuat folder Child Theme tidak menggunakan spasi, karena jika menggunakan spasi akan memunculkan error.

Anda dapat menambahkan prefix ‘-child’ di bagian nama tema Child Theme atau menggunakan nama lain sesuai dengan keinginan.

Sebagai contoh, berikut ini adalah cara membuat Child Theme di WordPress menggunakan File Manager dan tema Twenty Seventeen yang sudah tersedia default di WordPress.

  1. Buka Control Panel kemudian Klik File Manager
  2. Buka Direktori Instalasi WordPress Anda. Jika Anda tidak menginstall WordPress di sub-folder, direktori WordPress adalah public_html Anda. Kemudian buka folder “wp-content/themes”.
  3. Klik icon “Create New Folder”. Masukkan nama Child Theme dan klik Create.
  4. Buka folder Child Theme yang sudah dibuat.
    Langkah setelah ini Anda akan membuat file style.css dan functions.php secara bertahap.
  5. Klik tombol “New File” dan masukkan style.css, klik Create.
  6. Tambahkan kode di bawah ini ke dalam fule style.css
*/Theme Name: Twenty Seventeen ChildTheme URL: https://niagahoster.co.idDescription: Twenty Seventeen Child ThemeAuthor: NiagahosterAuthor URL: http://niagahoster.co.idTemplate: twentyseventeenVersion: 1.0.0Text Domain: twentyseventeen-child*/ Custom CSS goes after this line
  1. Ganti semua isi sesuai dengan tema dan domain Anda. Bagian yang paling penting adalah bagian ‘Template’ dan ‘@import’ –rule di CSS yang memungkinkan Anda mengimpor dari style sheet lain–, karena bagian tersebut akan menjadi identitas Child Theme Anda bagian dari tema utama yang mana. Setelah selesai, jangan lupa klik “Save”.
  2. Klik tombol New File dan masukkan functions.php, klik Create. Anda dapat menggunakan file ini untuk menambahkan dan memodifikasi fungsi .php untuk Child Theme Anda.
  3. Setelah Anda selesai, buka halaman admin WordPress, kemudian buka menu “Appearance » Themes”. Anda akan melihat tema Child Theme yang baru dibuat. Klik “Activate” untuk mengaktifkannya.
  4. Ketika Anda akse website, mungkin tampilannya belum sempurna. Hal ini dikarenakan Anda belum memodifikasi file functions.php
  5. WordPress memiliki fungsi untuk memanggil CSS dari tema utama. Melalui halaman Admin WordPress, buka menu “Appearance » Editor” dan pilih functions.php. Kemudian copy dan paste kode beriut ke dalam file functions.php di dalam Child Theme Anda:
<?phpadd_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );
function enqueue_parent_styles() {wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );}?>
  1. Setelah selesai, jangan lupa klik “Update” pada bagian bawah editor untuk menyimpannya.
  2. Buka kembali website Anda dan harusnya tampilan webisite Anda sudah normal. Jika masih terjadi masalah, coba lakukan kembali pengecekan langkah-langkah sebelumnya dan pastikan semua kode sudah benar.

Baca juga: SEO WordPress Mudah dengan 16 Langkah Optimasi

Langkah 2 – Mengkustomisasi Child Theme WordPress

Pada langkah sebelumnya, Anda sudah berhasil membuat Child Theme dan mengaktifkannya. Anda tentu ingin mengubah Child Theme sesuai dengan apa yang Anda inginkan.

1. Mengkustomisasi Tampilan Child Theme

Mengkustomisasi tampilan tema utama WordPress menggunakan Child Theme dapat Anda lakukan dengan mengedit file style.css di Child Theme. File ini dapat Anda akses melalui File Manager atau dashboard WordPress Anda.

Jika menggunakan dashboard WordPress, akses menu editor di “Appearance » Editor”. Pada bagian ini Anda paling tidak paham kegunaan CSS dan mengetahui sedikit bagaimana cara kerjanya.

Sebagai contoh, Anda dapat menggunakan baris kode di bawah ini untuk mengubah warna backgroud.

.site-content-contain {background-color: #FF0000;position: relative;}

Kode di atas akan mengubah background tema Anda menjadi merah (#FF0000). Tidak hanya background, Anda dapat mengubah elemen lain yang berhubungan dengan CSS: file size, warna, dan lain sebagainya.

2. Menghapus dan Menambahkan Fitur

Selain mengganti element CSS, Anda dapat mengubah fitur dan fungsi yang ada tema WordPress. Fungsi yang dimaksud seperti menambahkan tombol call to action dan semacamnya.

Anda tidak dapat menambahkan fungsi ini di dalam file style.css, tetapi Anda dapat menambahkannya melalui file functions.php.

Kelebihan Child Theme adalah mempunyai file functions.php yang terpisah. Anda dapat menambahkan atau menghapus fitur (seperti plugin) menggunakan file functions.php.

Ketika melakukan pembaruan (update) tema, Anda bisa memastikan pengubahan apapun tidak akan hilang bila menggunakan functions.php.

Sebagai contoh, di bawah ini adalah baris kode yang digunakan untuk menonaktifkan fitur pencarian di WordPress.

function disable_search( $query, $error = true ) {if ( is_search() ) {$query->is_search = false;$query->query_vars[s] = false;$query->query[s] = false;// to errorif ( $error == true )$query->is_404 = true;}}
add_action( ‘parse_query’, ‘disable_search’ );add_filter( ‘get_search_form’, create_function( ‘$a’, “return null;” ) );

Selain menghapus fitur pencarian, Anda juga dapat melakukan hal lain seperti menambahkan kode Google Analytics ke dalam footer menggunakan functions.php. Anda cukup tambahkan kode di bawah ini:

// add google analytics to footerfunction add_google_analytics() { echo ‘<script src=”http://www.google-analytics.com/ga.js” type=”text/javascript”></script>’; echo ‘<script type=”text/javascript”>’; echo ‘var pageTracker = _gat._getTracker(“UA-XXXXX-X”);’; echo ‘pageTracker._trackPageview();’; echo ‘</script>’;}add_action(‘wp_footer’, ‘add_google_analytics’);

Baca juga: 10+ Plugin WordPress Terbaik & Gratis

Penutup

Cara membuat Child Theme cukup sederhana. Hanya dengan menggunakan beberapa langkah copy-paste, Anda sudah dapat menciptakan Child Theme yang dapat memudahkan pekerjaan yang berhubungan dengan tema. Meskipun akan lebih gampang menggunakan editor tema bawaan di WordPress. Kami tetap menyarankan Anda untuk menggunakan Child Theme jika ingin melakukan kustomisasi tema WordPress Anda.

Semoga artikel ini dapat membantu Anda membuat Child Theme di WordPress. Anda dapat meninggalkan pertanyaan melalui kolom koemntar. Jika Anda menyukai artikel ini silahkan subscribe untuk mendapatkan artikel menarik lainnya.

17
Yasin K Yasin K is a Technical Content Writer for Niagahoster Blog. Other words are unimportant things you will never need to know. Let the content speak for itself :)

Leave a Reply

Your email address will not be published. Required fields are marked *

fifteen − seven =