Membuat Themes Wordpress sendiri - Part 2 Oleh: asep saepulloh Halo sahabat jaco. Di tutorial sebelumnya kita sudah bahas bagaimana membuat themes wordpress sendiri. Bagaimana? sudah mengerti belom :Doke selanjutnya kita masuk ke tahap membuat sidebar. Di tutorial sebelumnya saya belum memberikan content pada sidebar. Kali ini kita akan mengisi... 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 'id' => 'jago_sidebar', // ID 'before_widget' => '<div>', 'after_widget' => '</div>',
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() : '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, Jadi, bila kita ganti menjadi seperti ini : 'id' => 'jago_sidebar', // ID 'before_widget' => '<div class="widget_containerx">', 'after_widget' => '</div>', 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 Tentang Penulis asep saepulloh Kode itu alat perang, bung! :D