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

Kumpulan Source Code Greenfoot

Algorithma Java Mencari KPK dan FPB

Algorithma Coretan Abstrak dengan HTML5 Canvas

Kode Greenfoot Game Snake Sederhana

Cara Membuat Halaman HTML Sederhana

Menambahkan reCAPTCHA v2 pada Login Form

Algorithma Collision Detection Sederhana

Algoritma Tombol Putar dengan Greenfoot

Honeycomb Style Wallpaper dengan HTML5 Canvas

Belajar Identifikasi Asam Basa Larutan dengan Aplikasi Android