Cara Menambah Area Widget Header di WordPress

Apakah Anda berencana ingin menambah widget di dalam header area pada WordPress Anda? Tentunya widget akan memudahkan Anda dalam menambahkan beberapa konten widget seperti banner, kode adsense untuk penempatan iklan, gambar, menu, ataupun konten lainnya.

Pada artikel kali ini saya akan memberikan tutorial cara menambah widget header di WordPress. Menambah area widget bukan menambah konten dalam widget.

Tutorial ini untuk tingkat menenah karena akan menambah beberapa script kode function dan menambah kode CSS pada tema Anda.

Mengapa Anda harus menambah area widget WordPress?

Pada dasarnya setiap tema hanya memiliki area widget pada sidebar dan footer, tidak banyak tema WordPress memiliki area widget pada header. Nah itulah sebabnya saya ingin share untuk menambah area widget di header pada blog WordPress.

Langkah 1 membuat area widget pada header WordPress

Pertama tentunya kita perlu menambahkan area widget kostum. Langkah ini akan memungkinkan melihat daerah widget widget kostum pada menu Appereance >> Widgets pada halaman dashboard WordPress Anda.

Caranya cukup mudah Anda hanya menambahkan kode di bawah ini ke dalam file functions.php

function wpb_widgets_init() {

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '<div class="chw-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="chw-title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

Kode di atas akan menambahkan area widget di header tema Anda.

Sekarang coba Anda kunjungi widgets setting di halaman dashboard Anda, tampilannya akan seperti gambar di bawah ini dengan nama “costum header widget area”.

cara menambah widget area wordpress

Anda bisa menambahkan beberapa konten pada widget tersebut seperti html/text, gambar, dll kemudian simpan.

Langkah 2 menampilkan area widget header

Namun setelah Anda menambahkan beberapa konten dalam widget di atas ketika dilihat dalam blog tidak akan muncul karena kita belum menambahkan kode PHP pada header.php nya untuk menampilkan widget header tersebut.

Selanjutnya sekarang kita tambahkan beberapa kode PHP nya. Silahkan tambahkan kode di bawah ini dalam file header.php tema Anda.

<?php

if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
	
<?php endif; ?>

Setelah itu jangan lupa untuk menyimpannya.

Sekarang Anda dapat melihat konten yang telah ditambahkan sebelumnya seperti banner dan html. Namun penempatannya masih berantakan dikarenakan kita belm menambahkan kode CSS untuk widget header tersebut. Mari kita lanjutkan untuk menambah beberapa kode CSS. Silahkan lanjutkan langkahnya.

Langkah 3 menambahkan kostumisasi CSS pada area widget header

Jika Anda menggunakan plugin jetpack maka caranya cukup mudah. Silahkan kunjungi menu Appereance >> Costumize pada dashboard WordPress Anda. Lalu di sidebar kiri lihat ada menu costum Additional CSS.

menambah widget header wordpress

Silahkan tambahkan kode di bawah ini lalu simpan.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
}	
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

Namun jika Anda tidak menggunakan plugin jetpack untuk menambahkan kode CSS di atas caranya kunjungi Appereance >> Editor. Lalu cari file styles.css pada sidebar kanan dasboard WordPress. Lalu tambahkan kode tersebut jangan lupa simpan juga.

menambahkan area widget wordpress

Silahkan sesuaikan kode CSS di atas sesuai tema yang Anda gunakan.

Itulah tutorial kali ini tentang bagaimana cara memambah area widget header di WordPress. Semoga membantu, jika ada yang ingin ditanyakan atau masih belum mengerti tanyakan di kotak kolom komentar di bawah.

Note: Karena artikel-artikel ini panjang maka di bagi beberapa bagian/ halaman. Silahkan untuk melihat artikel lanjutan-nya klik halaman 2 3 4 atau next di atas ini.

4 Comments

Ada yang ingin ditanyakan?