Categories
Theme WordPress

Membuat Sidebar Widget

Selamat berjumpa kembali dalam seri panduan membangun themes dari nol hingga menjadi themes yang memenuhi standart WordPress 3.1. Pelan tapi pasti themes yang sudah kita bangun mulai menampakkan bentuknya. Jika anda mengikuti terus panduan ini dari awal, saya yakin anda sudah mulai berani mengutak-atik themes yang sudah ada. Tapi buat yang terlambat silahkan baca kembali panduan ini dari awal biar nyambung karena saya tidak akan mengulang lagi pelajaran yang sudah lewat 🙂

Jika kemarin kita telah menyelesaikan pembuatan bagian konten, maka sekarang kita akan coba memasukkan unsur canggih dalam themes kita yaitu sidebar widget. Disini kita akan berkenalan dengan file baru yang kita beri nama functions.php. File ini khusus menangani fungsi-fungsi PHP yang kita bangun untuk keseluruhan blog. Jadi, anda harus benar-benar membaca artikel ini dengan baik dan teliti

Dalam membuat sidebar widget, kita akan bekerja dengan 3 file sekaligus:

  1. functions.php yang menangani fungsi widget di sidebar kita
  2. index.php yang bertugas menentukan dimana letak sidebar widgetnya
  3. style.css yang mengurusi bagaimana widget-widget ditampilkan

Baiklah, pertama kita akan buat file functions.php. Caranya sama dengan saat kita membuat file index.php, kalau sudah lupa silahkan buka kembali arsip-arsip tulisan berseri ini.

Untuk mendeklarasikan sebuah widget, kita gunakan fungsi register_sidebar. Nah, karena kita akan meregistrasi 3 sidebar widget sekaligus sesuai dengan theme yang kita bangun, maka kita akan buat fungsi khusus yang mendaftarkan 3 widget tersebut. Berikut kodenya:

 'Sidebar Lebar',
		'id' => 'sidebar-lebar',
		'description' => 'Sidebar dengan lebar 300px terletak paling atas',
		'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); register_sidebar( array( 'name' => 'Sidebar Kiri', 'id' => 'sidebar-kiri', 'description' => 'Sidebar kiri dengan lebar 145px terletak di bawah sidebar lebar', 'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); register_sidebar( array( 'name' => 'Sidebar Kanan', 'id' => 'sidebar-kanan', 'description' => 'Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di sebelah kanan sidebar kiri', 'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); } add_action( 'widgets_init', 'themegue_widgets' ); ?>

    Oke, saya jelaskan dulu. Pertama kode function themegue_widgets() dipakai untuk mendeklarasikan sebuah fungsi baru. Dalam contoh ini nama fungsinya adalah themegue_widgets.

    Selanjutnya dalam fungsi tersebut kita mendeklarasikan 3 buah widget dengan nama sidebar lebar, sidebar kiri dan sidebar kanan. Masing-masing sidebar kita beri keterangan nama sidebarnya, id, diskripsi, dll.

    Dan terakhir kita daftarkan fungsi tersebut agar dieksekusi menggunakan perintah add_action( 'widgets_init', 'themegue_widgets' );

    Sudah paham ya?

    Menginformasikan letak sidebar widget di Themes

    Berikutnya kita akan menunjukkan kepada WordPress dimana letak sidebarnya. Gak mungkinkan kita cuma daftarin aja widgetnya tapi nggak kita tunjukkan mau muncul dimana. Konyol dong jadinya. Bagaimana caranya?

    Buka file index.php dan kita cari kode sidebar kita yang dahulu. Kalau tidak salah, kodenya kemarin seperti ini:

    
    

    Disinilah kita perintahkan WordPress meletakkan widget sidebar. Dan perlu diingat, walaupun namanya sidebar widget, tapi tidak menutup kemungkinan untuk diletakkan di tempat lain lho (misalnya header atau footer). Karena kitalah yang menentukan dimana widget tersebut akan muncul.

    Ada 2 cara untuk menampilkan widget.

    Pertama widget baru muncul kalau ada isinya. Kalau ndak ada isinya dia hilang seolah-olah tidak ada. Cara ini bisa kita terapkan di sidebar lebar. Kita asumsikan, sidebar lebar digunakan untuk menampilkan iklan banner atau adsense. Nah, kalau tidak ada iklan sama sekali, maka sidebar itu hilang sehingga hanya memunculkan sidebar kiri dan kanan saja. Maka kita ganti kode untuk menampilkan sidebar lebar dengan kode berikut:

    	
    

    Lihat kan? Kita gunakan fungsi IF untuk melakukan pengecekan apakah sidebar lebar ada isinya atau tidak (maksudnya widgetnya terisi atau tidak). Kalau ada, maka munculkan isinya. Kalau ndak ada ya hilangkan beserta DIV-nya sehingga tampilan kotak lebarnya ikut hilang. Gak lucu kok kalau kita cuma menampilkan kotak kosong doang.

    Fungsi kita pakai untuk memunculkan isi sidebar widget. Dalam hal ini sidebar widget dengan ID sidebar-lebar.

    Cara kedua menampilkan widget adalah jika ada isinya, maka tampilkan isinya. Tapi jika tidak ada isinya, maka tampilkan isi default. Jadi lokasi widgetnya tidak pernah kosong. Ini akan kita terapkan untuk sidebar kiri dan kanan. Kodenya seperti ini:

    Nah, sudah paham kan? Sekarang tinggal kreatifitas anda sendiri yang menentukan isian defaultnya apa. Inilah kode sidebar yang saya buat dengan isian default untuk sidebar kiri adalah form search dan arsip, sedangkan untuk sidebar kanan saya isi meta. Cekidot !!

    • Arsip

    • Meta

    Sekarang coba lihat blog anda. Sebelum kita pasang widget, seharusnya tampilannya seperti ini:

    Tampilan sidebar sebelum dipasang widget
    Tampilan sidebar sebelum dipasang widget

    Dan inilah tampilan wp-admin pada menu widget

    Menu Widget
    Menu Widget

    Tampilannya masih ancur ya? Gpp, besok kita styling bagian sidebar ini. Anda pelajari dulu apa yang sudah saya sampaikan sampai paham. Insya Allah ke depan kita akan lebih banyak utak-atik kode lagi. Buat anda yang nyasar kesini dan bingung mulai dari mana, klik disini untuk melihat daftar isinya.

    By Lutvi

    Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

    95 replies on “Membuat Sidebar Widget”

    Wah, saya dah coba tuh bang. tapi, koq kalo saya tambah widget baru di sidebar baru itu , koq widget itu berubah setelah di refresh bang?? Itu gimana ya bang?
    Tolong pencerahannya. coba aja lihat blog saya tuh bang… makasih..

    ah ribet juga ya, gak kayak blogspot. Kalo di blogspot kan ada menu layout, langsung klik aja mau 1, 2 atau 3 sidebar. Kalo wordpress dot com cuma bisa gonta ganti theme aja tp sidebar tetep aja satu. Tapi soal kecepatan emang lebih cepat wordpress dot com, kalo blogspot sering galat saat selesai edit trus klik pratinjau.

    Ada 2 macam mainan robot: robot jadi, tinggal tekan tombol dia jalan. Tapi ada robot rakitan yang bisa diprogram apa aja.

    Blogspot dan WordPress kayak gitu tuh.. hehehe.. Kalau mainan anak saya yang SD ya sekelas blogspot xixixi…

    wah mas adiar180 masalah jumlah sidebar tergantung themenya…
    bisa kok theme diutak-atik hingga memiliki jutaan sidebar yang semuanya widgetized sayang monitornya gak cukup…
    saya pernah bikin theme wp sidebar kiri 2, sidebar kanan 2, footer bar 4…. tapi gak dipakai karena monitornya pas resolusi kecil content jadi tidak kelihatan…

    maksudnya mas diar itu wp dot mas.. wp dot com kan kita gak bisa ngapa2in, paling gonta-ganti template gratisan, gak bisa edit templatenya, kecuali upgrade ke versi berbayar..

    Wah sial, gara-gara salah menamai file jadi bener. harusnya ‘functions.php’ eh malah ‘s’-hilang.. Tapi alhamdulilah udah beres.. Nice nice !!
    lanjut ah,,,

    Mas, saya yang nanya di twitter 🙂
    Kok pas logout ada error code gini:
    “Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-content\themes\diajar\functions.php:35) in C:\xampp\htdocs\wordpress\wp-login.php on line 353”
    sudah saya oprek functions.php tapi tetep 🙁

    Terima kasih panduannya
    Saya punya masalah yang sama. Upaya terakhir file functions.php isinya dihapus tinggal dua baris:

    hasilnya tetap warning…
    Warning: Cannot modify header information – headers already sent by (output started at C:\www\data\wordpress\wp-content\themes\themegue\functions.php:2) in C:\www\data\wordpress\wp-login.php on line 349

    Dimana kurangnya, tolong pencerahannya.

    coba di cek di atas nah di lihat ada berapa disana kemungkinan disana seperti permasalahan saya juga itu 😀 … cari di indeks.php permasalahannya … thanks mas lutvi ane jadi sedikit paham atas pembelajaran ini …

    coba di cek di atas __ nah di lihat ada berapa __ disana kemungkinan disana seperti permasalahan saya juga itu 😀 … cari di indeks.php permasalahannya … thanks mas lutvi ane jadi sedikit paham atas pembelajaran ini …

    Met pagi mas Lutfi, beberapa kali coba widget selalu gagal, terakhir kali bisa enggak taunyapas di coba ternyata sidebar yang kanan melorot ke bawahnya sidebar yang kiri. itukenapa yaa.. terima kasih 🙂

    ane g tau tutor ini apa masih support sama wp 3.3….

    tapi yg jelas kemarin ane buat sidebar dengan kode di atas tak ada yg saya ganti….
    jadi ketika baru install (kata lain sidebar masih kosong) eh disidebar banyak widgetnya

    ada search random post recent post dan yg lebih sadis style nya g kebaca g tau salahnya dimana tapi ketika saya buka widget ternyata ada isinya …..padahal belom saya masukin setelah saya hapus semua widgetnya kemuddian ane pasang lagi meta sama Link stylenya bisa bekerja dengan baik huff cpd kalau g ngerti gini

    btw cara mem- Widgetized sidebar gmna thanks

    ini pas di wp-admin nya kok ga tampil yah sidebarnya (menu-widget)..jadi kosong..oya saya pake WordPress 3.3..mohon bantuannya admin. Terima kasih

    maaf…problem clear..ternyata salah di saya kurang “s”..sama seperti kasusnya mas cucu yg diatas..function.php awalnya..tp seakrang dah saya ganti jadi functions.php..dan dah keliatan sidebarnya di menu widget di wp-admin nya…makasih tutorialnya

    emang duduls IQ ane, 2 jam sia2 cuman gara2 functions kurang s. padahal udah berkali-kali baca message2 disini. malah codingnya dirubah2. :'(

    thanks buat blog owner, you punya blog .. mantab je.

    Mas, klo mo nambahin tag “span” custom menu widget gimana, seperti di wp_nav_menu formulanya kan ‘link_before’=>’. Lha klo mo edit pada custom menu widget gimana formulanya mas?
    Biasanya sih aq edit di wp-include > default-widgets.php. Lha klo g usah ngotak-atik wp-include, tp lgsung dari tema kita gimana?
    Makasih sebelumna mas….. 🙂

    mau tny mas, sy pake theme ‘magazine basic’, sy buat widget sidebar kiri & kanan, tapi kenapa sidebar kanan kok malah pindah ke bawah sidebar kiri?..tolong bantuannya..trm ksh.

    Mau tanya ni mas, gimana cara ngilangin tulisan (dan mengedit kata2nya) :
    “Hey there! Thanks for dropping by rantinghijau! Take a look around and grab the RSS feed to stay updated. See you around!”
    Saya menggunakan tema Motion.
    Thanx…

    The theme you are currently using isn’t widget-aware, meaning that it has no sidebars that you are able to change. For information on making your theme widget-aware, please follow these instructions.
    kalau kayak gini kenapa mas?

    selamat siang mas,

    kebetulan saya lagi seneng edit2 theme wordpress. saya lagi ada kesulitan mas untuk membuat kategori menjadi 2 atau 3 kolom seperti yang ada di web nya mas http://lutviavandi.com. mohon bimbingannya mas agar dapat membuat category menjadi 2 atau 3 kolom.

    terima kasih

    mas mw nanyak,
    font anda sangat menarik bgt, kasi tw dong cara buat font artikel kyk anda
    maklum mas, baru mengenal dunia web, terutama wordpress

    Mas mau nanya, saya udah ngurutin tutorialnya dari awal . Sampe tutorial sblm ini masih baik2 aja. Tp pas udah upload file funcions.php ini kok muncul error ky sperti komen di atas, errornya “Warning: Cannot modify header information – headers already sent by (output started at /home/k3968189/public_html/testus/wp-content/themes/mpukiyups/functions.php:35) in /home/k3968189/public_html/testus/wp-includes/option.php on line 563” . Ane cek seharian tetep gak nemu salahnya. Nama filenya udah bener functions.php. Apa bisa dibantu mas ?

    Selamat berjumpa kembali dalam seri panduan membangun themes dari nol hingga menjadi themes yang memenuhi standart WordPress 3.1.
    ane baru nemuin ni tutorial semalem, trus di baca2 dlu, trus nemuin klimat di atas itu, klo g slah skrg WP uda seri ke 3.4.2 kan,,, apakah tutorial ini masih berlaku mas?
    apakah nantinya theme yg kita buat bisa d pake di WP 3.4.2?
    maklum newbie yg baru trjun d WP mas,,,,

    ada errnya di wp 342, teruutama penggunaan register_sidebar ntar lagi dihapus di ganti dengan wp_register_sidebar_widget.
    Namun Themes tulisan diatas sangat berguna bagi pemula. tinggal upde az dengan fungsi yang baru

    gan mau tanya,
    punya ane error
    bagian functions :
    Parse error: syntax error, unexpected ‘ register_sidebar’ (T_STRING) in C:\xampp\htdocs\webku\wp-content\themes\temaku\functions.php on line 3

    nih gan udah ketemu!! coba aja modelnya di ganti jadi kaya gini
    register_sidebar(array(
    ‘name’ => __( ‘Right Hand Sidebar’ ),
    ‘id’ => ‘right-sidebar’,
    ‘description’ => __( ‘Widgets in this area will be shown on the right-hand side.’ ),
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));

    kalo engga gin gan di file functionya
    yptheme_widgets(){
    register_sidebar(array(
    ‘name’ => __(‘Sidebar Lebar’),
    ‘id’ => __(‘sidebar-lebar’),
    ‘description’ => __(‘Sidebar dengan lebar 278px terletak paling atas’),
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));
    }
    add_action( ‘widgets_init’, ‘yptheme_widgets’ );

    Parse error: syntax error, unexpected ‘register_sidebar’ (T_STRING) in X:\xampp\htdocs\blog\wp-content\themes\traveltour\functions.php on line 4
    itu kenapa ya gan? ko muncul error kaya gitu ? 🙁

    Alhamdulillah ketemu nih ganti functions.php pake code ini ane hapus 2 bagian sidebarnya tinggal copas yg atas kl mau nambah

    ‘Sidebar Lebar’,
    ‘id’ => ‘sidebar-lebar’,
    ‘description’ => ‘Sidebar dengan lebar 300px terletak paling atas’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );

    }
    add_action( ‘widgets_init’, ‘themegue_widgets’ );

    d coba kang

    wah ga nampak codenya commentnya html ya

    ‘Sidebar Lebar’,
    ‘id’ => ‘sidebar-lebar’,
    ‘description’ => ‘Sidebar dengan lebar 300px terletak paling atas’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );

    }
    add_action( ‘widgets_init’, ‘themegue_widgets’ );

    biar ga ada pesan error pas bkin file functions.php

    Assalamualaikum.. tutorial yang bagus..!! tapi dari berbagai macam sumber tutorial wordpress yang ada di google smua menyatakan sidebar di samping kiri kanan tapi tetep aja di sabelah kanan,, kok gak ada toturial yang sidebar nya ada di samping kiri kanan dari halaman posting yaa..?
    kalo boleh usul nich mohon di buatkan tutorial untuk menbuat sidebar ada di kiri dan kanan halaman posting.. trus sidebar kiri hanya muncul di katagori tertentu.
    klo ada send ke mail aq,, sebelumnya terimakasih.

    itu sebenernya harus pake function gak ya?

    soallnya saya tulis nya kaya gini
    register_sidebar( array(
        ‘name’ => ‘Sidebar Lebar’,
        ‘id’ => ‘sidebar-lebar’,
        ‘description’ => ‘Sidebar dengan lebar 300px terletak paling atas’,
        ‘before_widget’ => ”,
        ‘after_widget’ => ”,
        ‘before_title’ => ”,
        ‘after_title’ => ”,
      ) );

    bisa
    tapi klo ama function keluar error “unexpected T_string ……..”

    itu gimana ya? apa yang salah

    Parse error: syntax error, unexpected T_STRING in /var/www/wordpress/wp-content/themes/testone/functions.php on line 4

    Gan ni error ane, ini isi line 4 nya

    register_sidebars(array(

    ini fungsi yang dah jalan gan checkdot…
    __( ‘Sidebar Lebar’, ‘testone’ ),
    ‘id’ => ‘sidebar-lebar’,
    ‘description’ => __( ‘Sidebar dengan lebar 300px terletak paling atas’, ‘testone’ ),
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );

    register_sidebar( array(
    ‘name’ => __( ‘Sidebar Kanan’, ‘testone’ ),
    ‘id’ => ‘sidebar-kanan’,
    ‘description’ => __( ‘Sidebar kiri dengan lebar 145px terletak di bawah sidebar lebar’, ‘testone’ ),
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );

    register_sidebar( array(
    ‘name’ => __( ‘Sidebar Kiri’, ‘testone’ ),
    ‘id’ => ‘sidebar-kiri’,
    ‘description’ => __( ‘Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di sebelah kanan sidebar kiri’, ‘testone’ ),
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );
    }
    add_action( ‘widgets_init’, ‘testone_widgets_init’ );
    ?>

    Ini fungsi yang udah jalan gan

     __( 'Sidebar Lebar', 'testone' ),
    		'id' => 'sidebar-lebar',
    		'description' => __( 'Sidebar dengan lebar 300px terletak paling atas', 'testone' ),
    		'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); register_sidebar( array( 'name' => __( 'Sidebar Kanan', 'testone' ), 'id' => 'sidebar-kanan', 'description' => __( 'Sidebar kiri dengan lebar 145px terletak di bawah sidebar lebar', 'testone' ), 'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); register_sidebar( array( 'name' => __( 'Sidebar Kiri', 'testone' ), 'id' => 'sidebar-kiri', 'description' => __( 'Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di sebelah kanan sidebar kiri', 'testone' ), 'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); } add_action( 'widgets_init', 'testone_widgets_init' ); ?>

    Parse error: syntax error, unexpected ‘Â Â register_sidebar’ (T_STRING) in C:\xampp\htdocs\wordpress\wp-content\themes\my-theme\functions.php on line 3

    mohon di beri petunjuk gan, isi dari functios.php nya ada yang eror , padahal copas .

    coba cek nama filenya bos, jangan² bukan functions.php -nya kurang huruf “s” jadi function.php (kesahalan umumnya gitu)

    Mas Lutvi mau tanya untuk memunculkan sidebar di homepage. Ngaturnya darimana ya? kalo masuk ke postingan atau kedalam menu sih sudah muncul. Minta tolong pencerahannya. thanks

    I just want to say I am newbie to blogs and really loved your blog site. More than likely I’m likely to bookmark your blog . You amazingly come with awesome writings. Thank you for sharing with us your website page.

    We are a group of volunteers and starting a new scheme in our community. Your website offered us with valuable info to work on. You have done an impressive job and our whole community will be grateful to you.

    Amongst my audience (no leaders keep in mind) given to me how she has helped her hubby set up his Facebook membership only to discover that first thing he did would be to contact his years as a child sweetheart and tell her how lovely she is (and shamelessly go to in her)

    We’re a group of volunteers and opening a new scheme in our community. Your website provided us with valuable information to work on. You have done a formidable job and our whole community will be thankful to you.

    Hi, Neat post. There’s a problem with your site in internet explorer, would test this… IE still is the market leader and a large portion of people will miss your wonderful writing due to this problem.

    Comments are closed.