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

Algorithma Julianday dengan Java

Balapan Santai Kediri-Malang tiap Hari Senin Pagi

Jasa Penjadwalan Semester, UTS dan UAS Perguruan Tinggi menggunakan Google Sheet

Kaidah Baku untuk Konsistensi Data (PT, Tbk, Pty., & Ltd.)

Besar Pajak Tahunan Honda Versa 2016 di Tahun 2022

Ketika Pengelola Basis Data Terabaikan

Menyikapi Ucapan AI Pejabat

Game TicTacToe dengan Greenfoot

Modifikasi Obyek 3D Hellosceneform dengan MeshLab