Cara Membuat Widget Sidebar di Wordpress

Widget Sidebar - Akhir akhir ini saya lagi senang membuat theme wordpress sendiri. Sekalain mengasah kemampuan mengoding menggunakan cms wordpress. Kali ini saya akan mencoba memberikan tutorial bagaimana cara membuat widget sidebar di wordpress. Oh ya sebelumnya jika anda jago membuat theme wordpress anda bisa mendapatkan penghasilan lewat online, karena theme yang anda buat, bisa dijual lewat online.

Kembali ke cara membuat widget di wordpress sebenarnya sangat mudah, disini saya akan mencoba menjelaskannya secara simple ke anda.

Berikut langkah-langkah cara membuat Widget Sidebar di Wordpress:

1. Selanjutnya kopi kode berikut di file functions.php

<?php register_sidebar( array( 'name' => 'Sidebar Atas', 'id' => 'sidebar-atas', 'description' => 'Sidebar atas dengan lebar 300px', '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 Bawah', 'id' => 'sidebar-bawah', 'description' => 'Sidebar bawah dengan lebar 300px', 'before_widget' => ' <li id="%1$s" class="widget-container %2$s">', 'after_widget' => '</li> ', 'before_title' => '<h3 class="widget-title"> ', 'after_title' => '</h3> ', ) ); ?>

Untuk mendeklarisakan sebuah widget, gunakan fungsi register_sidebar. Pada kode di atas kita akan mendeklarisan 2 buah widget dengan nama sidebar atas dan sidebar bawah. Masing masing sidebar diberi keterangan misal nama, id dan deskripsinya serta pengaturan widget lainnya.

Untuk selanjutnya kita butuh file untuk menginformasikan dimana letak dari widgetnya. Kebanyakan theme wordpress meletakkan widget di sidebar. Tapi bukan tidak berarti widget tidak bisa di pasang di single post atau di footer, itu sangat bisa sekali. Tapi untuk contoh kali ini saya akan memberi contoh peletakan widget di sidebar. Untuk itu kita butuh file namanya sidebar.php dan isinya seperti di bawah ini.



2. Kopi kode di bawah ini di file sidebar.php
<div id="sidebar"> <?php if ( is_active_sidebar( 'sidebar-atas' ) ) : ?> <div id="atas"> <ul> <?php dynamic_sidebar( 'sidebar-atas' ); ?> </ul> </div> <?php endif; ?> <div id="bawah"> <ul> <?php if ( ! dynamic_sidebar( 'sidebar-bawah' ) ) : ?> <li id="search" class="widget-container widget_search"> <?php get_search_form(); ?> </li> <li id="archives" class="widget-container"> <h3 class="widget-title"> Arsip</h3> <ul> <?php wp_get_archives( 'type=monthly' ); ?> </ul> </li> <?php endif; ?> </ul> </div> </div>

Ada dua cara  untuk menampilkan widget, yang pertama widget akan di tampilkan jika ada isinya, tapi jika tidak ada isinya, widget tersebut akan hilang atau tidak ditampilkan. Pengcekan ini menggunakan IF yang ada baris 3 pada gambar di atas. Untuk contoh kasus ini bisa dilihat sidebar-atas di atas. Pada contoh sidebar-atas di atas, widget akan ditampilkan jika ada isinya. Tapi jika tidak ada isinya maka mulai baris ke 4  sampai baris ke 8 tidak akan di tampilkan. Biasanya widget yang seperti ini digunakan untuk menampilkan iklan seperti adsense dan sejenisnya. Baris 6 pada gambar di atas digunakan untuk menampilkan isi dari widget.

Yang kedua adalah widget akan ditampilkan jika ada isinya. Tapi jika tidak ada isinya maka tampilkan isi defaultnya. Jadi widget tidak akan pernah kosong. Pada kodingan di atas ini di wakili oleh baris ke 13, pada baris itu di cek widget ada isinya apa tidak, jika tidak ada isinya maka jalanan baris ke 14 ke 23.