Menambahkan Custom Sidebar Wordpress


Kadang untuk suatu kebutuhan tampilan, dalam theme Wordpress perlu ditambahkan custom sidebar sendiri.

Misalnya menambahkan widget yang hanya muncul di halaman home saja.

Awalnya penulis lebih memilih-milih theme yang sesuai dengan yang penulis inginkan sebagai solusi daripada menambahkan widget.

Tetapi karena malah serasa membuang-buang waktu, akhirnya penulis memutuskan untuk menambahkan kode sendiri ke theme-nya.

Perlu diketahui, theme Wordpress yang penulis gunakan adalah OceanWP.

Selain theme ini cocok untuk pendidikan, sesuai pekerjaan penulis, kode PHP-nya mudah dibaca, dan mudah untuk menambahkan custom widget (Widget Tambahan).

Caranya terdapat tiga langkah yang perlu dilakukan, yaitu menambahkan kode di functions.php, menambahkan kode penempatan widget di theme, dan terakhir menyesuaikan style css agar tampilan widget sesuai dengan theme.

Penambahan css, bisa jadi tidak diperlukan, ketika ternyata tampilan widget tambahan sudah sesuai dengan bawaannya secara otomatis.


Berikut ini kode-kode yang perlu ditambahkan pada beberapa file dalam theme OceanWP, untuk menambahkan Custom Top dan Custom Right sidebar yang hanya muncul pada halaman home, untuk menempatkan widget Feed CC, SD, SMP dan SMA Brawijaya Smart School Universitas Brawijaya (BSS UB) di website bss.ub.ac.id, seperti terlihat pada gambar di atas.

functions.php
function top_custom_sidebar() { 
    register_sidebar( 
        array ( 
            'name' => __( 'Custom Top', 'Ubed Edit One' ), 
            'id' => 'custom-ubed-top-bar', 
            'description' => __( 'Custom Topbar and Just Home', 'Top bar and just at home' ), 
            'before_widget' => '<div class="widget-content">', 
            'after_widget' => "</div>", 
            'before_title' => '<h3 class="widget-title">', 
            'after_title' => '</h3>', 
        ) 
    ); 
} 
add_action( 'widgets_init', 'top_custom_sidebar' ); 
 
function right_custom_sidebar() { 
    register_sidebar( 
        array ( 
            'name' => __( 'Custom Right', 'Ubed Edit Two' ), 
            'id' => 'custom-ubed-right-sidebar', 
            'description' => __( 'Custom Rightbar and Just Home', 'Right bar and just at home' ), 
            'before_widget' => '<div class="sidebar-box widget_recent_entries clr">', 
            'after_widget' => "</div>", 
            'before_title' => '<h3 class="widget-title">', 
            'after_title' => '</h3>', 
        ) 
    ); 
} 
add_action( 'widgets_init', 'right_custom_sidebar' ); 

sidebar.php
Di dalam div dengan id right_sidebar_inner

  <?php if ( is_active_sidebar( 'custom-ubed-right-sidebar' ) && is_home()) : ?> 
  <?php dynamic_sidebar( 'custom-ubed-right-sidebar' ); ?> 
  <?php endif; ?> 

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Kebodohan Karyawan Menyalahkan Sistem

Kode Apps Script MailApp untuk Form Mengirimkan Email

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Menyembunyikan Failed Load Images di Blogger

Algorithma Bilangan Prima dengan Javascript

Apps Script untuk Mengirimkan Notifikasi Approval

Mencoba Submit Theme di Wordpress.org

Menghapus Baris di Google Sheets yang Memiliki Sel Kosong dengan Apps Script