Download Now Download Themes Gratis WordPress Responsive!

Cara Buat Custom Widget WordPress

Dengan adanya Widget WordPress, mejadikan mudah bagi pengguna untuk hanya drag dan drop elemen ke situs mereka. Ada banyak tema WordPress dan plugin yang menggunakan widget untuk memungkinkan pengguna untuk membuat layout sendiri. Bahkan ada plugin untuk meningkatkan manajemen widget. Pada artikel ini, Saya akan menunjukkan cara untuk membuat widget kustom Anda sendiri WordPress. Tentunya tutorial ini hanyalah tutorial sederhana, untuk pengembangan yang lebih komplek dan sesuai dengan keinginan anda, silahkan kembangkan sendiri.

Baca : Apa dan kegunaan Widget WordPress?

widget wordpress custom

Membuat Widget di WordPress

Plugin ini hanya akan berisi Title dan isi yang sudah di tuliskan di dalam code, cuman sekedar plugin dengan tulisan output Hello Word. untuk membuatnya, silahkan buka file functions.php theme wordpress Anda.

/* Membuat widget */
class test_widget extends WP_Widget {

function __construct() {
parent::__construct(
// ID widget
'test_widget', 

// nama widget
__('Centerklik Widget', 'test_widget_domain'), 

// Widget deskripsi
array( 'description' => __( 'Contoh Tutorial Widget sederhana', 'test_widget_domain' ), )
);
}

// Membuat widget front-end
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// sebelum dan sesudah widget argumen ditentukan oleh tema
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// Code yang akan ditampilkan
echo __( 'Hello, World!', 'test_widget_domain' );
echo $args['after_widget'];
}

// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'test_widget_domain' );
}
// Widget admin form
?>
<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
}
/*Akhir Widget */

Setelah anda menyimpan kode diatas, langsung masuk ke dashboard wordpress anda dan ke menu Appearance » Widgets, drag and drop Centerklik Widget di sidebar anda untuk menampilkan widget kustom ini pada sidebar.

Untuk intruksi code widget sederhana tersebut sudah saya tuliskan di script code diatas, silahkan pahami dan pelajari alur code tersebut. Semoga membantu menambah pengetahuan anda tentang wordpress dan widget. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • Firhan

    Mas di adain forum kayanya keren websitenya,

    cuma masukan

  • Masih agak bingung dengan code php beginian gan, maklum baru mengenal WP, mudah-mudahan cepat bisa menyesuaikan diri dengan WP. salam kenal

    • Salam kenal juga gan. pelajari aja pelan-pelan gan. selamat belajar. 🙂

  • makasi gan

  • di functions.php gan, di tambahin script diatas.

  • Kings News

    gan klo nambah widget di home tp nambahinnya pake coding, gimana yah

  • gunakan widget recent post, masuk ke appearance -> widget

Must Read...!
Theme WordPress Grovy Responsive Free

Groovy adalah Theme Wordpress Responsive yang di desain untuk blog / majalah yang indah...

Cara Tampilkan dan Sembunyikan Widget WordPress

Pada artikel kali ini saya akan membahas tentang manajemen widget pada wordpress, dimana anda...

Close