WordPress, Elrolumnews — Anda sudah bisa membuat shortcode, sudah bisa membuat Custom Post Type. Tapi bagaimana dengan sidebar? Bagaimana cara menambahkan elemen kustom ke area widget—seperti kotak newsletter, daftar sosial media, atau promo—yang bisa diatur dari dashboard?
Artikel ini cocok untuk: Anda yang sudah familiar dengan WordPress dan ingin naik level dengan Widget Kustom—untuk menambahkan elemen yang bisa diatur sendiri ke sidebar, footer, atau area widget lainnya.
Widget adalah blok konten yang bisa Anda tambahkan, hapus, dan atur dari Appearance > Widgets—tanpa menyentuh kode . Widget kustom memungkinkan Anda membuat blok sendiri yang sesuai kebutuhan—misalnya “Tentang Penulis”, “Promo Spesial”, atau “Daftar Sosial Media”.
Di artikel ini, kita akan bahas dari nol: apa itu widget, cara membuat widget kustom, mendaftarkan sidebar, hingga contoh praktis yang bisa langsung dipakai.
Apa Itu Widget dan Mengapa Penting?
Widget adalah komponen yang bisa ditambahkan ke sidebar atau area widget lainnya. WordPress sudah menyediakan beberapa widget bawaan:
| Widget Bawaan | Fungsi |
|---|---|
| Archives | Daftar arsip bulanan |
| Categories | Daftar kategori |
| Recent Posts | Artikel terbaru |
| Search | Kotak pencarian |
| Text | Teks bebas (HTML) |
| Custom HTML | Kode HTML |
Mengapa Membuat Widget Kustom?
| Alasan | Penjelasan |
|---|---|
| Kontrol penuh | Tampilan dan fungsi sesuai kebutuhan |
| User-friendly | Klien bisa atur dari dashboard |
| Reusable | Bisa dipakai di beberapa sidebar |
| Lebih rapi | Tidak perlu hardcode di theme |
💡 Tips Pro: Widget kustom sangat berguna untuk tema yang dijual—memberi fleksibilitas ke pengguna tanpa harus edit kode.
Langkah 1: Daftarkan Area Widget (Sidebar)
Sebelum membuat widget, Anda perlu area widget (sidebar) tempat widget akan ditempatkan.
Kode di functions.php
function elrolum_register_sidebars() { register_sidebar( array( 'name' => 'Sidebar Utama', 'id' => 'sidebar-utama', 'description' => 'Sidebar yang muncul di halaman blog', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); } add_action( 'widgets_init', 'elrolum_register_sidebars' );
Penjelasan
| Parameter | Fungsi |
|---|---|
| name | Nama yang muncul di dashboard |
| id | Identifier unik (huruf kecil, tanpa spasi) |
| description | Deskripsi area widget |
| before_widget | HTML sebelum setiap widget |
| after_widget | HTML setelah setiap widget |
| before_title | HTML sebelum judul widget |
| after_title | HTML setelah judul widget |
Tampilkan di Theme
Di file tema (misalnya sidebar.php atau footer.php):
<?php if ( is_active_sidebar( 'sidebar-utama' ) ) : ?> <aside class="sidebar"> <?php dynamic_sidebar( 'sidebar-utama' ); ?> </aside> <?php endif; ?>
💡 Tips Pro: Anda bisa mendaftarkan beberapa area widget—misalnya “Footer 1”, “Footer 2”, “Footer 3″—dengan fungsi yang sama, hanya beda
iddanname.
Langkah 2: Membuat Widget Kustom dengan Coding
Sekarang saatnya membuat widget sendiri. Kita akan menggunakan class WP_Widget .
Kode Dasar Widget
class Elrolum_Widget_Profil extends WP_Widget {
// 1. Constructor
public function __construct() {
parent::__construct(
'elrolum_widget_profil', // ID unik
'Profil Penulis', // Nama di dashboard
array( 'description' => 'Menampilkan profil penulis' ) // Deskripsi
);
}
// 2. Output di frontend
public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
echo '<div class="profil-widget">';
echo '<p>' . esc_html( $instance['deskripsi'] ) . '</p>';
echo '</div>';
echo $args['after_widget'];
}
// 3. Form di admin
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : 'Tentang Penulis';
$deskripsi = ! empty( $instance['deskripsi'] ) ? $instance['deskripsi'] : '';
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">Judul:</label>
<input class="widefat"
id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>"
type="text"
value="<?php echo esc_attr( $title ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'deskripsi' ) ); ?>">Deskripsi:</label>
<textarea class="widefat"
id="<?php echo esc_attr( $this->get_field_id( 'deskripsi' ) ); ?>"
name="<?php echo esc_attr( $this->get_field_name( 'deskripsi' ) ); ?>"><?php echo esc_textarea( $deskripsi ); ?></textarea>
</p>
<?php
}
// 4. Simpan data
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = sanitize_text_field( $new_instance['title'] );
$instance['deskripsi'] = sanitize_textarea_field( $new_instance['deskripsi'] );
return $instance;
}
}Daftarkan Widget
function elrolum_register_widgets() { register_widget( 'Elrolum_Widget_Profil' ); } add_action( 'widgets_init', 'elrolum_register_widgets' );
Penjelasan Setiap Method
| Method | Fungsi |
|---|---|
__construct() | Mendefinisikan ID, nama, dan deskripsi widget |
widget() | Menampilkan output di frontend |
form() | Form pengaturan di admin |
update() | Menyimpan data dari form |
⚠️ Peringatan: Gunakan sanitasi (
sanitize_text_field,sanitize_textarea_field) di methodupdate()untuk mencegah XSS .
Langkah 3: Widget dengan Gambar dan Tautan
Mari buat contoh yang lebih kaya: widget dengan gambar, teks, dan tombol.
class Elrolum_Widget_Promo extends WP_Widget {
public function __construct() {
parent::__construct(
'elrolum_widget_promo',
'Promo Spesial',
array( 'description' => 'Menampilkan promo dengan gambar dan tombol' )
);
}
public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
echo '<div class="promo-widget">';
if ( ! empty( $instance['gambar'] ) ) {
echo '<img src="' . esc_url( $instance['gambar'] ) . '" alt="' . esc_attr( $instance['title'] ) . '">';
}
if ( ! empty( $instance['teks'] ) ) {
echo '<p>' . esc_html( $instance['teks'] ) . '</p>';
}
if ( ! empty( $instance['url'] ) ) {
echo '<a href="' . esc_url( $instance['url'] ) . '" class="promo-button">'
. esc_html( $instance['tombol'] ) .
'</a>';
}
echo '</div>';
echo $args['after_widget'];
}
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : 'Promo Spesial';
$gambar = ! empty( $instance['gambar'] ) ? $instance['gambar'] : '';
$teks = ! empty( $instance['teks'] ) ? $instance['teks'] : '';
$url = ! empty( $instance['url'] ) ? $instance['url'] : '';
$tombol = ! empty( $instance['tombol'] ) ? $instance['tombol'] : 'Beli Sekarang';
?>
<p>
<label>Judul:</label>
<input class="widefat" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>"
type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<p>
<label>URL Gambar:</label>
<input class="widefat" name="<?php echo esc_attr( $this->get_field_name( 'gambar' ) ); ?>"
type="text" value="<?php echo esc_attr( $gambar ); ?>">
</p>
<p>
<label>Teks:</label>
<textarea class="widefat" name="<?php echo esc_attr( $this->get_field_name( 'teks' ) ); ?>"><?php echo esc_textarea( $teks ); ?></textarea>
</p>
<p>
<label>URL Tombol:</label>
<input class="widefat" name="<?php echo esc_attr( $this->get_field_name( 'url' ) ); ?>"
type="text" value="<?php echo esc_attr( $url ); ?>">
</p>
<p>
<label>Teks Tombol:</label>
<input class="widefat" name="<?php echo esc_attr( $this->get_field_name( 'tombol' ) ); ?>"
type="text" value="<?php echo esc_attr( $tombol ); ?>">
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = sanitize_text_field( $new_instance['title'] );
$instance['gambar'] = esc_url_raw( $new_instance['gambar'] );
$instance['teks'] = sanitize_textarea_field( $new_instance['teks'] );
$instance['url'] = esc_url_raw( $new_instance['url'] );
$instance['tombol'] = sanitize_text_field( $new_instance['tombol'] );
return $instance;
}
}Langkah 4: Gunakan Widget di Block Editor (Gutenberg)
Jika website Anda menggunakan Gutenberg, widget tetap bisa diakses di Appearance > Widgets. Tampilannya mungkin berbeda, tapi fungsinya sama.
Widget Block Editor
WordPress 5.8+ menggunakan block editor untuk widget. Widget kustom Anda akan muncul di Legacy Widget atau Widget Kustom.
💡 Tips Pro: Jika ingin widget kustom tampil di block editor, pastikan widget Anda mendukung REST API atau gunakan block sebagai gantinya.
Tips Lanjutan untuk Level Expert
1. Widget dengan Multiple Fields
Gunakan array untuk menyimpan banyak field sekaligus:
$instance['sosmed'] = array( 'facebook' => sanitize_url( $new_instance['sosmed']['facebook'] ), 'twitter' => sanitize_url( $new_instance['sosmed']['twitter'] ), );
2. Widget dengan Shortcode di Dalamnya
Jika widget Anda menampilkan konten yang mungkin berisi shortcode:
echo do_shortcode( $instance['teks'] );
3. Widget untuk WooCommerce
Tampilkan produk terlaris di sidebar:
$query = new WP_Query( array( 'post_type' => 'product', 'posts_per_page' => 5, 'meta_key' => 'total_sales', 'orderby' => 'meta_value_num', ) );
Kesalahan Umum dan Cara Menghindarinya
| Kesalahan | Akibat | Solusi |
|---|---|---|
Tidak sanitasi di update() | Rentan XSS | Gunakan sanitize_*() |
Tidak pakai $args | Widget tidak konsisten | Gunakan $args['before_widget'] |
| Edit tema induk | Hilang saat update | Gunakan child theme |
| Tidak daftarkan sidebar | Widget tidak muncul | register_sidebar() |
| Nama widget duplikat | Konflik | Gunakan prefix unik |
Widget kustom adalah cara WordPress untuk menambahkan elemen yang bisa diatur ke sidebar, footer, atau area widget lainnya. Kuncinya:
Daftarkan sidebar — dengan
register_sidebar()Buat class widget — extends
WP_WidgetDefinisikan 4 method —
__construct,widget,form,updateSanitasi output —
esc_html(),esc_url(),sanitize_*()Daftarkan widget —
register_widget()Tampilkan sidebar —
dynamic_sidebar()di themeGunakan child theme — agar kode aman saat update
Dengan widget kustom, Anda bisa membuat sidebar yang kaya dan fleksibel—yang bisa diatur oleh siapa pun, tanpa harus menyentuh kode.
Ingat: Widget adalah alat. Konten yang hebat tetap butuh ide dan pesan yang jelas. Widget membantu Anda menampilkannya dengan cara yang rapi dan konsisten.
Sudah siap membuat widget kustom pertama Anda?
💬 Punya pengalaman dengan widget kustom? Bagikan di kolom komentar!
