hallo teman-teman, untuk kali ini saya akan memberikan artikel mengenai cara membuat dan menambahkan sidebar di wordpress. kadang kita dapat theme yang gratis kemudian tidak ada sidebarnya nah disini sangat cocok bagi halaman website anda yang tidak ada sidebar atau mau menambahkan kembali bisa. dalam membuat sidebar widget kita akan bekerja pada 3 file yang pertama file “function.php”,”index.php”,”style.css”.langkah yang pertama anda buka theme yang digunakan, edit file style.css min ada class/id selector dan headig selector seperti script dibawah ini :

  1. .sidebar {
  2.  float:left;
  3.  width:250px;
  4.  background:#ffffff;
  5.  margin-bottom:10px;
  6.  padding:15px 15px 5px 15px;
  7.  border:1px solid #e0e0e0;
  8.  clear:both;
  9. }
  10. .widget {
  11.  border:1px solid #e0e0e0;
  12.  padding:10px;
  13.  font-size:11px;
  14.  margin-bottom:10px;
  15. }
  16. .widget h3 {
  17.  background:#ebe9e1;
  18.  font-familyArialHelveticasans-serif;
  19.  font-size:13px;
  20.  font-weight:bold;
  21.  padding:5px 10px;
  22.  display:block;
  23.  margin-bottom:10px;
  24.  text-align:left;
  25.  border:1px solid #dedbd1;
  26.  height:16px;
  27. }

kode .widget adalah sebagai class selector namun untuk code .widget h3 itu sebagai heading selector pada widget. selain itu kita haru mengedit sidebar.php dan function.php pertama anda buka file fuction.php pada theme anda kemudian anda salin script  didalam rentangan tag <?php…?>

  1. if ( function_exists(‘register_sidebar’) )
  2. register_sidebar(array(
  3.  ‘name’ => ‘sidebar2’,
  4.  ‘before_widget’ => ‘<div class=”widget”>’,
  5.  ‘after_widget’ => ‘</div>’,
  6.  ‘before_title’ => ‘<h3>’,
  7.  ‘after_title’ => ‘</h3>’,
  8. ));

setelah itu kita perlu mengedit sidebar.php,salin script berikut :

<div class="sidebar">
<?php dynamic_sidebar('sidebar2'); ?>
</div>


kemudian kode tersebut akan diterjemahkan menjadi kurang lebih seperti ini :

<div class="sidebar">

<div class="widget">
<h3>Judul widget 1</h3>
isi widget 1
</div>
<div class="widget">
<h3>Judul widget 2</h3>
isi widget 2
</div>

</div>

Untuk menambahkan widget pada sidebar2 tersebut kita tinggal masuk ke menu apperance->widget nanti akan ada settingan untuk sidebar2