Twitter @Kurnia_biz

Menambahkan Footbar Widget WordPress

Kali ini saya coba share cara menambah footbar widget 3 kolom di themes / tema wordpress. Tampilan themes website kurnia.biz sebelumnya adalah standar hanya terdapat satu widget dua widget di bagian sidebar saja, seperti di bawah :

Tema Standart

nah karena space sidebar di sebelah kanan udah penuh… hehe ,  kayaknya butuh space bar lagi buat widget2 yang lain… sasaran utama adalah di footer (sepi banget), di oprek buat ditambahin widget 3 kolom seperti ilustrasi di bawah :

Ditambahkan footbar 3 kolom

Caranya…

ada 2 cara, yaitu : bikin yang statis atau yang dinamis. Kalo statis kita tinggal oprek di bagian footer.php dan style.css , lebih simple, tapi giliran mau ganti widget lain harus oprek script lagi, waduhhhh ribet. Bikinn yang dinamis sekalian ajalah, biar mumet yang penting dapet… hahai…

Oke langsung saja kita oprekkk…

Kita bikin 3 Widget tambahan dengan nama kiri, tengah, dan kanan.

Buka file functions.php dan kita bikin fungsi baru (copy paste dari fungsi side bar) :

if ( function_exists('register_sidebar') )
{
 // nah tambahin widget disinii...
 register_sidebar(array(
 'name' => 'kiri',
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
 register_sidebar(array(
 'name' => 'tengah',
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
 register_sidebar(array(
 'name' => 'kanan',
 'before_widget' => '<div id="%1$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
}

Kode diatas adalah bagaimana kita membuat fungsi widget, sekarang kita coba panggil widget tersebut di  website kita :

Buka file footter.php dan letakkan script di bawah ini (pasang di baris paling atas juga boleh):

Ralat: line 01 kode di bawah yang berbunyi

<div>

mestinya adalah

<div class="dynamic_sidebar">

<div>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('kiri') ) : ?>
 <!-- bikin default bwt nampilin kategori -->
 <h2>Categories</h2>
 <ul>
 <?php wp_list_categories('hide_empty=0&orderby=id&title_li='); ?>
 </ul>
<?php endif; ?>
 </div><!-- .kiri -->
 <div>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('tengah') ) : ?>
 <h2>Categories</h2>
 <ul>
 <?php wp_list_categories('hide_empty=0&orderby=id&title_li='); ?>
 </ul>
 <!-- jika widget sudah kita isi maka kode ini tidak akan ditampilkan lagi -->
<?php endif; ?>
 </div><!-- .tengah -->
 <div>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('kanan') ) : ?>
 <h2>Categories</h2>
 <ul>
 <?php wp_list_categories('hide_empty=0&orderby=id&title_li='); ?>
 </ul>
<?php endif; ?>
 </div><!-- .kanan -->

hasilnya seperti ini (kalo berhasil.. hehe)

tambahan widget footbar 3 kolom terpasang

nah terakhir kita tinggal bikin style-nya sesuaikan aja dengan sytle template kita, contoh style kurnia.biz seperti ini:

tambahin di style.css:

/* www.kurnia.biz */
.dynamic_sidebar{
float:left;
width:31%;/*lebar*/
min-height:270px;/*tinggi min*/
margin:1% 1% 1% 1%;/*jarak antar sidebar*/
}

Nah.. tinggal pasang widget sesuka kita…..

Selesai. Hasil akhir liat aja tema web ini.

Incoming search terms:

• menambahkan footer social network links module (3)
• menambah widget di footer wordpress (3)
• membuat footer widget tambahan (2)
• membuat sidebar keren 3kolomdi footer wordpress (2)
• footer 3 kolom wordpress (2)
• menambah widget footer 3 kolom pada wordpress (2)
• plugin bikin footer widget di wordpress (2)
• menambah widget dibawah posting wordpress (2)
• menambah widget di footer (2)
• menambah widget di footer pada wordpress (1)