Sebelum melakukan pembuatan Widget untuk ditambahkan ke Wordpress, backup dulu Wordpress tersebut, Baca artikel cara Backup WordPress jika belum tahu cara backup. artikel tersebut menjelaskan cara backup Wordpress pada hosting.
Sebelum membuat widget WordPress ada beberapa hal yang perlu diperhatikan. Pertama-tama, pembuatan widget dapat dilakukan pada plugin kustom. Kemudian dapat menambahkan kode widget kustom ke dalam file functions.php dari template yang digunakan.
WordPress telah menyediakan Widgets API untuk memudahkan membuat widget kustom. Untuk membuat widget kustom, dapat menggunakan class WP Widget. Class ini memiliki 20 fungsi yang dapat digunakan.
Supaya widget dapat berfungsi, berikut ini adalah 4 function untuk persyaratan minimal yang harus dipenuhi.
- _construct(): function constructor
- widget(): output dari widget
- form(): menentukan pengaturan widget pada dashboard
- update(): update pengaturan widget
Berikut adalah cara menambahkan Widget pada WordPress :
2. Masuk ke Dashboard Wordpresss
3. Menambahkan Script perintah
//Masukkan function di sini
lalu buat 4 function yang diharuskan dalam membuat widget seperti yang telah dibahas diatas
Implementasi 4 Fungsi : digunakan untuk menentukan ID, nama dari widget, serta deskripsi
function __construct() {
parent::__construct(
// ID widget
'xyz_widget',
// nama widget
__('Widget PT XYZ', ' xyz_widget_domain'),
// deskripsi widget
array( 'description' => __( 'Belajar Widget PT XYZ', 'xyz_widget_domain' ), )
);
}
Tampilan Widget : untuk mengatur tampilan 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 __( 'Selamat Datang di Blog PT. XYZ', 'xyz_widget_domain' );
echo $args['after_widget'];
}
Back-End : untuk mengatur back-end dari widget
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'xyz_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
}
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;
}
Daftarkan Widget : untuk mendaftarkan widget pada WordPress
Letakkan kode di bawah ini pada bagian luar dari class xyz_widget atau pada bagian atasnya.
function xyz_register_widget() {
register_widget( 'xyz_widget' );
}
add_action( 'widgets_init', 'xyz_register_widget' );
Jadi kode komplit dari file functions.php adalah sebagai berikut :
function xyz_register_widget() {
register_widget( 'xyz_widget' );
}
add_action( 'widgets_init', 'xyz_register_widget' );
class niagahoster_widget extends WP_Widget {
function __construct() {
parent::__construct(
// ID widget
'xyz_widget',
// nama widget
__('Widget PT. XYZ', ' xyz_widget_domain'),
// deskripsi widget
array( 'description' => __( 'Belajar Widget PT.XYZ', 'xyz_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 __( 'Selamat Datang di Blog PT.XYZ', 'xyz_widget_domain' );
echo $args['after_widget'];
}
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'xyz_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;
}
}
Penambahkan kode Script tersebut dapat langsung dilakukan pada website melalui FTP client atau editor WordPress melalui bagian functions.php dari template aktif yang digunakan.
4. Menambahkan Widget ke WordPress
Pilih menu Appearance > Widgets.maka akan terlihat widget kustom yang telah dibuat.
kemudian lakukan drag pada lokasi yang diinginkan, misalkan sidebar. Lihat layout seperti gambar di bawah ini
