Waryanto Technical Content Writer, Menyukai dunia Technical IT, Digital Marketing & Travel Blogging. Suka berbagi hal baru yang bermanfaat bagi orang lain.

Cara Membuat Widget WordPress secara Kustom

4 min read

Cara Membuat Custom Widget WordPress

WordPress menyediakan banyak widget yang bisa Anda tambahkan dengan mudah. Widget tersebut bisa Anda dapatkan dari template atau plugin yang Anda install. 

Namun, jika tema yang Anda pakai tidak mendukung penambahan widget secara otomatis, Anda perlu membuat widget di WordPress secara custom. 

Di artikel ini, Anda akan mempelajari cara membuat custom widget WordPress. Tutorial ini mungkin akan sedikit rumit bagi Anda yang masih pemula. Namun, kami akan menjelaskan tutorialnya sesederhana mungkin. 

Untuk memperdalam pemahaman Anda mengenai Widget, simak terlebih dulu pengertian dan cara kerja widget kustom berikut ini!

Apa itu Widget

Widget adalah item yang ditambahkan ke side halaman website. Terkadang widget juga ditambahkan di footer dan header. Widget dapat berfungsi untuk memenuhi kebutuhan website Anda. Misalnya, widget kalender, galeri, archives, dan sebagainya. 

Widget biasanya telah disediakan oleh template yang Anda pakai. Anda tinggal tambahkan dengan drag and drop widget saat kustomisasi tampilan website. 

Namun, jika widget yang tersedia belum dapat memenuhi kebutuhan website, Anda bisa membuat custom widget sendiri. Cara membuat 

Baca juga: 15+ Widget Blog Terbaik untuk WordPress Anda

Cara Kerja Widget Kustom

WordPress telah menyediakan Widgets API untuk memudahkan Anda membuat widget kustom. Untuk membuat widget kustom, Anda dapat menggunakan class WP Widget. Class ini memiliki 20 fungsi yang dapat Anda gunakan.

Supaya widget dapat berfungsi, berikut ini adalah 4 function untuk persyaratan minimal yang harus Anda penuhi.

  • _construct(): function constructor
  • widget(): output dari widget
  • form(): menentukan pengaturan widget pada dashboard
  • update(): update pengaturan widget

Tentu saja terdapat metode lain yang menyediakan fungsionalitas lain. Anda dapat membaca halaman berikut ini sebagai referensi.

Baca Juga: Cara Menggunakan Widget WordPress untuk Website Anda

Cara Membuat Custom Widget di WordPress

Dalam tutorial ini kami akan memandu Anda membuat widget kustom sederhana, yaitu menampilkan tulisan Selamat Datang. Tujuannya, jika Anda telah memahami alur pembuatannya, Anda dapat membuat widget yang lebih rumit sesuai kebutuhan pada website Anda.

Untuk mulai membuat widget di WordPress, Anda dapat membuat widget pada website yang telah online maupun website yang berada di komputer lokal.

Jika Anda berencana membuat widget kustom pada website yang telah online, silakan backup file website Anda terlebih dulu.

Anda juga membuat custom widget pada komputer lokal terlebih dahulu supaya lebih aman, misalnya pada XAMPP. Cara ini syaratnya adalah menginstal WordPress di XAMPP terlebih dahulu, lalu membuat widget WordPress kustom dan mengunggahnya ke hosting.

Berikut cara membuat custom widget WordPress.

1. Persiapkan Teks Editor atau Buka File functions.php

Di sini kami meletakkan kode pada file functions.php. Silakan buka text editor di komputer Anda kemudian buat class baru.

class niagahoster_widget extends WP_Widget {
//Masukkan function di sini
}

2. Implementasikan 4 Fungsi

Selanjutnya kami akan mengimplementasikan 4 fungsi yang sudah disebutkan sebelumnya satu per satu ke dalam class. Yang pertama adalah method constructor, digunakan untuk menentukan ID, nama dari widget, serta deskripsi.

function __construct() {
parent::__construct(
// ID widget
'niagahoster_widget',
// nama widget
__('Contoh Widget Niagahoster', ' niagahoster_widget_domain'),
// deskripsi widget
array( 'description' => __( 'Tutorial Widget Niagahoster', 'niagahoster_widget_domain' ), )
);
}

3. Atur Tampilan Widget

Selanjutnya adalah mengatur tampilan widget melalui function widget().

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//jika ada judul
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Halo, Selamat Datang di Blog Niagahoster', 'niagahoster_widget_domain' );
echo $args['after_widget'];
}

Pada langkah ini output dari widget telah dikonfigurasi sehingga akan menampilkan tulisan ‘Halo, Selamat Datang di Blog Niagahoster’ dan menampilkan title yang dibuat oleh user ketika menambahkan widget.

4. Atur Back-End

Selanjutnya adalah mengatur back-end dari widget dengan menggunakan method form():

public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'niagahoster_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}

Jika user membuat judul pada widget, kemudian judul tersebut akan dimasukkan ke dalam form HTML yang dibuat pada kode di atas. Jika judul tidak Anda masukkan di sana, secara otomatis sistem akan menggunakan judul bawaan yaitu Default Title.

5. Pasang Function Update

Berikutnya adalah memasang function update untuk memperbarui widget setiap ada perubahan pada pengaturan.

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}

Script tersebut akan menampilkan judul yang dibuat.

6. Mendaftarkan Widget pada WordPress

Selanjutnya adalah menggunakan fungsi tambahan untuk mendaftarkan widget pada WordPress. Letakkan kode di bawah ini pada bagian luar dari class niagahoster_widget atau pada bagian atasnya.

function niagahoster_register_widget() {
register_widget( 'niagahoster_widget' );
}
add_action( 'widgets_init', 'niagahoster_register_widget' );

Fungsi baru tersebut akan mendaftarkan widget dengan menggunakan ID widget, di fungsi the_construct(). Kemudian widget_init akan digunakan untuk memuat widget tersebut ke dalam WordPress melalui method add_action().

Susunan script akan terlihat seperti kode di bawah ini, Anda cukup meletakkannya pada bagian akhir kode dari file functions.php:

function niagahoster_register_widget() {
register_widget( 'niagahoster_widget' );
}

add_action( 'widgets_init', 'niagahoster_register_widget' );

class niagahoster_widget extends WP_Widget {

function __construct() {
parent::__construct(
// ID widget
'niagahoster_widget',
// nama widget
__('Contoh Widget Niagahoster', ' niagahoster_widget_domain'),
// deskripsi widget
array( 'description' => __( 'Tutorial Widget Niagahoster', 'niagahoster_widget_domain' ), )
);
}

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//if title is present
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Halo, Selamat Datang di Blog Niagahoster', 'niagahoster_widget_domain' );
echo $args['after_widget'];
}

public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'niagahoster_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}

}

Anda dapat menambahkan kode tersebut pada website melalui FTP client atau editor WordPress melalui bagian functions.php dari template aktif yang Anda gunakan.

widget kustom

Baca juga: cara Menambahkan Widget di WordPress 

7. Tes Widget yang Telah Dibuat

Untuk menambahkan widget, silakan pilih menu Appearance > Widgets. Anda akan melihat widget kustom yang telah Anda buat.

widget wordpress kustom

Anda tinggal melakukan drag pada lokasi yang diinginkan, misalkan sidebar. Hasil akhirnya akan terlihat seperti gambar di bawah ini.

membuat widget kustom

Baca Juga : Cara Membuat Plugin WordPress Sederhana

Kesimpulan

Membuat widget di WordPress secara kustom memang terdengar seperti pekerjaan sulit, terutama bagi Anda yang masih pemula. Tenang, sebenarnya tidak sesulit itu, kok. Kami telah menunjukkan kemudahannya dalam artikel ini. Anda pun juga bisa membuat widget kustom sendiri secara manual.

Untuk membuat widget di WordPress, Anda bisa melakukannya langsung di website online Anda melalui file functions.php. Namun, supaya lebih aman, sebaiknya Anda membuatnya di komputer lokal terlebih dulu.

Semoga tutorial ini dapat membantu Anda. Jika ada pertanyaan mengenai tutorial di atas, silakan tulis di kolom komentar, ya. Selamat mencoba 🙂

Waryanto Technical Content Writer, Menyukai dunia Technical IT, Digital Marketing & Travel Blogging. Suka berbagi hal baru yang bermanfaat bagi orang lain.

Leave a Reply

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