Halo sahabat jaco.

Di tutorial sebelumnya kita sudah bahas bagaimana membuat themes wordpress sendiri . Bagaimana? sudah mengerti belom :D
oke selanjutnya kita masuk ke tahap membuat sidebar. Di tutorial sebelumnya saya belum memberikan content pada sidebar. Kali ini kita akan mengisinya dengan widget-widget,  seperti : kalender, arsip, kategori, search dan lain sebagainya.

Oke langsung aja.

Register Sidebar

Sekarang kita buat file functions.php pada folder themes jagocoding , lalu ketikan kode seperti ini :

Ingat ya sabahat jaco, untuk penamaan file harus seperti ini "functions.php" tidak boleh , seperti ini : "fungsi.php" atau "function.php" , kenapa? karena file functions.php adalah standart dari si Wordpress.

function jago_widgets_init() {
    
        // Daftarkan widget pada themes
	register_sidebar( array(
		'name' => 'Sidebar Jagocoding', // Nama Widget sectionnya
		'id' => 'jago_sidebar', // ID
		'before_widget' => '<div>', 
		'after_widget' => '</div>',
		'before_title' => '<h2 class="rounded">',
		'after_title' => '</h2>',
	) );
        
}
add_action( 'widgets_init', 'jago_widgets_init' );

Nah, sekarang kamu bisa lihat hasilnya di menu Appereance

Sekarang coba kamu klik menu Appereance > Widgets 

Waw. Bombastiss!! *lebay

Nah sekarang kamu tinggal drag&drop aja widget-widget yang ingin kamu letakan di sisi sidebar themes kamu. Lalu kamu lihat hasilnya di frontend themes kamu.

Loh kog kosong sih ? Tenang-tenang belum selesai kog :D , sekarang kamu buka file sidebar.php, lalu ketikan kode seperti ini : 

<div id="sidebar">
    <?php 
    if(is_active_sidebar('jago_sidebar')):
        dynamic_sidebar('jago_sidebar');
    endif;
    ?>
</div>
<!-- #sidebar END -->

Tarraaaaaa!!!

Gimana-gimana? gampang gak?! iya dong gampang!! :D

Untuk memberikan style pada widget kamu tinggal berikan style pada file style.css , oh iya tips dari saya untuk mempermudah dalam memberikan style :

Gunakan inspector pada browser kamu, untuk melihat element-element pada widget tersebut. Oh iya gunakan tools lainnya di browser kamu, seperti disini 

Contoh : 

Saya akan memberikan style pada setiap widget "Search", jika saya inspect maka akan keluar seperti ini : 

Nah, kamu liat terdapat element <div>..</div>, element ini dihasilkan saat kita daftarkan sidebar, Oke kita bahas sedikit tentang parameter yang terdapat pada register_sidebar() :

register_sidebar( array(
		'name' => 'Sidebar Jagocoding', // Nama Widget sectionnya
		'id' => 'jago_sidebar', // ID <== ID ini yang kita panggil saat kita buat di file sidebar.php
		'before_widget' => '<div>' // <= Ini adalah element yang kita lihat saat men-inspect, 
		'after_widget' => '</div>' // <= Ini adalah element penutupnya,
		'before_title' => '<h2 class="rounded">',
		'after_title' => '</h2>',
	) );

Jadi, bila kita ganti menjadi seperti ini : 

register_sidebar( array(
		'name' => 'Sidebar Jagocoding', // Nama Widget sectionnya
		'id' => 'jago_sidebar', // ID
		'before_widget' => '<div class="widget_containerX">', 
		'after_widget' => '</div>',
		'before_title' => '<h2 class="rounded">',
		'after_title' => '</h2>',
	) );

Maka saat kita inspect element <div>..</div> akan menjadi <div class="widget_containerX">..</div> . Nah dengan seperti ini kita bisa lebih mudah memberikan style pada widget yang kita inginkan.

Masukan kode ini di style.css

/** WIDGET **/
    /*SEARCH*/
    .widget_containerX #searchform label{
        font-size: 12px;    
        color:#999;
    }
    .widget_containerX #searchform input[type="text"]{
        width: 100%;
        border:1px solid #CCC;
        padding:5px 0px;
    }
    .widget_containerX #searchform input[type="submit"]{
        width: 100%;
        padding: 5px 0px;
        background: #1C67B8;
        color:#FFF;
        border:none;
    }


/** WIDGET END **/

Oke, sekarang tinggal tergantung kreasi kamu sendiri. Buatlah seindah mungkin themes kamu :D 

Tunggu tutorial berikutnya yah :D . Jangan lupa follow dan pantengin terus timeline saya :D 

Selamat mencoba