Tutorial Cara Membuat Widget di Wordpress

Tutorial Cara Membuat Widget di WordPress

Di dalam wordpress tentunya sudah banyak widget-widget yang dibuat oleh para developer. Bagi mereka yang sudah tua di wordpress membuat sebuah widget bukanlah hal yang sulit, tapi mungkin banyak pemula yang bertanya-tanya bagaimana sih cara membuat widget di wordpress??

Nah, disini saya akan menjelaskan cara membuat widget wordpress itu sendiri. Untuk latihan, kita akan membuat widget ini dalam sebuah plugin. Oke, untuk permulaan silahkan buat sebuah file baru di wp-content/plugin dengan nama widget_gue.php. Lalu isi dengan code ini:

/*
Plugin Name: Widget Gue
Plugin URI: http://www.domain.com
Description: Sebuah widget sederhana
Author: Nur Rohmat
Version: 1
Author URI: http://www.domain.com
*/

Next.. Ada 3 fungsi (function) utama dari sebuah widget, yaitu:

function form()
function update()
function widget()

Kerangka Dasar

Kerangka dasar dari sebuah widget wordpress sebenarnya sangat sederhana. Coba perhatikan kode di bawah ini:

class widget_gue extends WP_Widget{ //Contoh widget class
	function widget_gue(){} //Pengaturan widget (nama,deskripsi,dll)
	function form(){} //form di halaman admin
	function update(){} //fungsi ketika widget diupdate/ disimpan
	function widget(){} //tampilan dari sebuah widget
}
add_action('widgets_init', create_function('', 'return register_widget("widget_gue");')); // fungsi untuk me-load widget_gue

Langkah 1

Kita akan membungkus widget ini dalam sebuah class. Nama dari class ini sangat penting. Nama class dan nama function harus sama.

class widget_gue extends WP_Widget{}

Selanjutnya kita akan memberi identitas dari widget tersebut. Sebagai contoh kita akan memberikan nama .

function widget_gue(){
        parent::WP_Widget(false, $name=__('Widget GUE','wp_widget'));
        }

Langkah 2 function form()

Tahap selanjutnya kita akan membuat form di halaman admin. Sebagai contoh kita akan menambahkan sebuah text input (untuk judul widget) dan sebuah textarea (untuk isi widget).

function form($instance){
		if ($instance){
			$teks=esc_attr($instance['teks']);
			$isi=esc_attr($instance['isi']);
			}
		else{
			$teks='';
			$isi='';
			}
		?>
		<label for="<?php echo $this->get_field_id('teks');?>">
			<?php _e('Judul','wp_widget_plugin');?>
		</label>
		<input class="widefat" type="text" name="<?php echo $this->get_field_name('teks');?>" id=<?php echo $this->get_field_id('teks');?> value="<?php echo $teks;?>" />
		<label for="<?php echo $this->get_field_id('teks');?>">
			<?php _e('Isi','wp_widget_plugin');?>
		</label>
		<textarea name="<?php echo $this->get_field_name('isi');?>" id="<?php echo $this->get_field_name('isi');?>"><?php echo $isi;?></textarea>
		<?php
		}

Langkah 3 function update()

Fungsi update digunakan untuk menyimpan data yang di inputkan user ke dalam form. Syntax-nya cukup sederhana

function update($new_instance,$old_instance){
		$instance=$old_instance;
		$instance['teks']=strip_tags($new_instance['teks']);
		$instance['isi']=strip_tags($new_instance['isi']);
		return $instance;
		}

Langkah 4 function widget()

Langkah selanjutnya kita akan mengatur tampilan dari widget yang kita buat. Kita akan menampilkan judul dan parameter lain yang dapat di edit user di menu widget. Kita juga akan menambahkan variabel-variabel khusus seperti $before_widget, $after_widget, $ before_title, dan $after_title.

	function widget($args,$instance){
		extract($args);
		$judul=apply_filters('widget_title',$instance['teks']);
		$isi=$instance['isi'];
		
		echo $before_widget;
		//Tampilkan judul
		if ($judul) echo $before_title.$judul.$after_title;
		
		//Tampilkan isi
		if( $isi) echo '<div class="panel-body">'.$isi.'</div>';
		echo $after_widget;
		}

Langkah 5

Langkah terakhir nih. Kita akan me-load widget_gue dengan menggunakan fungsi add_action().

add_action('widgets_init', create_function('', 'return register_widget("widget_gue");'));

Yups, itu langkah-langkah sederhana dalam membuat widget di wordpress. Untuk kode selengkapnya seperti ini:

<?php
/*
Plugin Name: Widget Gue
Plugin URI: http://www.domain.com
Description: Sebuah widget sederhana
Author: Nur Rohmat
Version: 1
Author URI: http://www.domain.com
*/

class widget_gue extends WP_Widget{
	#info widget
	function widget_gue(){
		parent::WP_Widget(false, $name=__('Widget GUE','wp_widget'));
		}
	
	#form widget
	function form($instance){
		if ($instance){
			$teks=esc_attr($instance['teks']);
			$isi=esc_attr($instance['isi']);
			}
		else{
			$teks='';
			$isi='';
			}
		?>
		<label for="<?php echo $this->get_field_id('teks');?>">
			<?php _e('Judul','wp_widget_plugin');?>
		</label>
		<input class="widefat" type="text" name="<?php echo $this->get_field_name('teks');?>" id=<?php echo $this->get_field_id('teks');?> value="<?php echo $teks;?>" />
		<label for="<?php echo $this->get_field_id('teks');?>">
			<?php _e('Isi','wp_widget_plugin');?>
		</label>
		<textarea name="<?php echo $this->get_field_name('isi');?>" id="<?php echo $this->get_field_name('isi');?>"><?php echo $isi;?></textarea>
		<?php
		}
		
	#update
	function update($new_instance,$old_instance){
		$instance=$old_instance;
		$instance['teks']=strip_tags($new_instance['teks']);
		$instance['isi']=strip_tags($new_instance['isi']);
		return $instance;
		}
		
	#Tampilan
	function widget($args,$instance){
		extract($args);
		$judul=apply_filters('widget_title',$instance['teks']);
		$isi=$instance['isi'];
		
		echo $before_widget;
		//Tampilkan judul
		if ($judul) echo $before_title.$judul.$after_title;
		
		//Tampilkan isi
		if( $isi) echo '<div class="panel-body">'.$isi.'</div>';
		echo $after_widget;
		}
	}
add_action('widgets_init', create_function('', 'return register_widget("widget_gue");'));

?>

Sekian tutorial cara membuat widget di wordpress, semoga dapat membantu anda dalam mengerjakan project pembuatan website dengan menggunakan wordpress.

Nur Rohmat

Seorang web developer yang belajar secara otodidak View all posts by Nur Rohmat

Comments

22 thoughts on “Tutorial Cara Membuat Widget di WordPress”

Gabel says:

June 24, 2014 at 22:28

Wah mantap mas,, hehehe,, di tunggu tutorial lainya mas. Sukses selalu buat TWD :D

TWD Editorial says:

June 24, 2014 at 22:34

thanks :)

Reply
- Gabel says:
  
  June 24, 2014 at 23:04
  
  Seharusnya yang berterimakasih saya mas,, karena dengan adanya tutorial2 saya bisa belajar mas. Suwun mas. :D
  
  Reply

bayu says:

August 8, 2014 at 11:23

kalo bikin plugin yang isi nya CRUD ke database gimana mas?
kasih tutor dong

jimmy says:

August 22, 2014 at 20:05

mas , maaf, kalo untuk wordpress , masangnya gimana ya .. udah saya upload dan jalan ini .. tinggal cara menampilkannya sebagai widget yang gak tau ,. ajarin mas ,,.. hehe ane baru belajar wp nih

ozetus says:

August 31, 2014 at 10:40

Makasih mas, buat pemula spt saya info ini bermanfaat banget…. tolong kasi penilaian di web http://www.bu-banten.com sy…. kira-kira apa ni yg harus di perbaiki

aeen says:

November 7, 2014 at 21:38

pengen buat juga web seperti bu-banten … :) i like tata letak n modelnya

Reply
aeen says:

November 7, 2014 at 21:40

saran saya, kalau boleh di tambahkan translate indo-inggris minimal… :)

Reply

asikbookie says:

December 1, 2014 at 14:30

wow mantap nih infonya gan
jangan lupa mampir ke asikbookie[dot]com juga ya gan
terima kasih gan
keep posting ya agan

andi says:

December 8, 2014 at 14:59

terimakasih postingannya mas sangat berguna bagi saya.,.,.,.

bunga says:

December 9, 2014 at 09:51

terima kasih tutorialnya, walaupun masih bingung.. soalnya terlalu singkat dan to the point.
mungkin krn saya pemula yg masih bener bener pemula. hi hi hi