Cara Membuat Custom Widget WordPress dari Nol

Widget adalah blok konten yang bisa ditempatkan di sidebar atau area widget lainnya. Meski WordPress menyediakan banyak widget bawaan, terkadang Anda perlu membuat sendiri. Membuat widget WordPress kustom memberi Anda kendali penuh atas konten dan tampilannya, dan caranya dengan meng-extend class WP_Widget.

Struktur Dasar Sebuah Widget

Setiap widget kustom terdiri dari sebuah class yang mewarisi WP_Widget dengan beberapa method wajib. Berikut contoh widget sederhana:

<?php
class Widget_Sapa extends WP_Widget {
    // 1. constructor: nama widget
    function __construct() {
        parent::__construct('widget_sapa', 'Widget Sapa');
    }

    // 2. tampilan di front-end
    function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<p>Halo, ' . esc_html($instance['nama']) . '!</p>';
        echo $args['after_widget'];
    }

    // 3. form pengaturan di admin
    function form($instance) {
        $nama = isset($instance['nama']) ? $instance['nama'] : '';
        echo '<input class="widefat" name="' . $this->get_field_name('nama') . '" value="' . esc_attr($nama) . '">';
    }
}

add_action('widgets_init', function() {
    register_widget('Widget_Sapa');
});
?>

Tiga Method Utama

  • __construct() — mendefinisikan ID dan nama widget.
  • widget() — menampilkan output ke pengunjung.
  • form() — membuat form pengaturan di dashboard.

Pentingnya Escaping

Perhatikan penggunaan esc_html() dan esc_attr(). Fungsi-fungsi ini mengamankan data sebelum ditampilkan, mencegah celah keamanan XSS. Selalu gunakan escaping saat menampilkan data di WordPress.

Kesimpulan

Dengan membuat widget WordPress sendiri, Anda memiliki kendali penuh atas konten yang tampil di area widget tanpa bergantung plugin. Ingat tiga method utamanya dan selalu terapkan escaping demi keamanan.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi WordPress.

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *