Membuat Sidebar Widget di WP

Dalam membuat sidebar widget, kita akan bekerja dengan 3 file sekaligus:

1. functions.php yang menangani fungsi widget di sidebar kita
2. index.php yang bertugas menentukan dimana letak sidebar widgetnya
3. style.css yang mengurusi bagaimana widget-widget ditampilkan

Baiklah, pertama kita akan buat file functions.php. Caranya sama dengan saat kita membuat file index.php, kalau sudah lupa silahkan buka kembali arsip-arsip tulisan berseri ini.

Untuk mendeklarasikan sebuah widget, kita gunakan fungsi register_sidebar. Nah, karena kita akan meregistrasi 3 sidebar widget sekaligus sesuai dengan theme yang kita bangun, maka kita akan buat fungsi khusus yang mendaftarkan 3 widget tersebut. Berikut kodenya:

view plaincopy to clipboardprint?


<?php  
function themegue_widgets() {    
  register_sidebar( array(  
    'name' => 'Sidebar Lebar',  
    'id' => 'sidebar-lebar',  
    'description' => 'Sidebar dengan lebar 300px terletak paling atas',  
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',  
    'after_widget' => '</li>',  
    'before_title' => '<h3 class="widget-title">',  
    'after_title' => '</h3>',  
  ) );  
    
  register_sidebar( array(  
    'name' => 'Sidebar Kiri',  
    'id' => 'sidebar-kiri',  
    'description' => 'Sidebar kiri dengan lebar 145px terletak di bawah sidebar lebar',  
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',  
    'after_widget' => '</li>',  
    'before_title' => '<h3 class="widget-title">',  
    'after_title' => '</h3>',  
  ) );  
  
  register_sidebar( array(  
    'name' => 'Sidebar Kanan',  
    'id' => 'sidebar-kanan',  
    'description' => 'Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di sebelah kanan sidebar kiri',  
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',  
    'after_widget' => '</li>',  
    'before_title' => '<h3 class="widget-title">',  
    'after_title' => '</h3>',  
  ) );  
    
}  
add_action( 'widgets_init', 'themegue_widgets' );  
?>  

Oke, saya jelaskan dulu. Pertama kode function themegue_widgets() dipakai untuk mendeklarasikan sebuah fungsi baru. Dalam contoh ini nama fungsinya adalahthemegue_widgets.

Selanjutnya dalam fungsi tersebut kita mendeklarasikan 3 buah widget dengan nama sidebar lebar, sidebar kiri dan sidebar kanan. Masing-masing sidebar kita beri keterangan nama sidebarnya, id, diskripsi, dll.

Dan terakhir kita daftarkan fungsi tersebut agar dieksekusi menggunakan perintahadd_action( 'widgets_init', 'themegue_widgets' );

Sudah paham ya?