Saat membuat tema WordPress, salah satu bagian pertama yang perlu kamu pahami adalah header. Bagian ini biasanya berada di paling atas website dan menjadi area penting yang pertama kali dilihat pengunjung.
Di dalam header, biasanya ada nama website, logo, deskripsi singkat, menu navigasi, tombol pencarian, atau elemen lain yang membantu pengunjung mengenali dan menjelajahi website.
Karena itu, header tidak hanya berfungsi sebagai pemanis tampilan, tapi juga punya peran penting dalam pengalaman pengguna.
Dalam tema WordPress, bagian header biasanya dibuat di file khusus bernama header.php.
File ini nantinya bisa dipanggil di berbagai halaman menggunakan fungsi get_header(), sehingga kamu tidak perlu menulis ulang kode header di setiap file template seperti index.php, single.php, atau page.php.
Memahami cara membuat header pada tema WordPress akan membantu kamu menyusun struktur tema dengan lebih rapi.
Kamu jadi tahu bagian mana yang berisi struktur awal HTML, di mana harus meletakkan wp_head(), bagaimana menampilkan nama website, dan bagaimana menambahkan menu navigasi di bagian atas website.
Di artikel ini, kita akan belajar membuat header sederhana untuk classic theme WordPress. Pembahasannya dibuat bertahap, mulai dari fungsi file header.php, contoh kode dasar, cara menampilkan nama website, sampai cara menambahkan menu navigasi agar header terlihat lebih lengkap.
Apa Itu Header pada Tema WordPress?
Header adalah bagian atas website yang biasanya muncul di hampir semua halaman. Bagian ini sering berisi elemen penting seperti logo, nama website, menu navigasi, tombol pencarian, atau informasi singkat yang membantu pengunjung memahami identitas dari website tersebut.
Kalau kamu membuka sebuah website berita, blog, atau toko online, biasanya bagian paling atas yang pertama terlihat adalah header.
Dari sana, pengunjung bisa mengenali nama website, melihat menu utama, lalu berpindah ke halaman lain yang mereka butuhkan.
Dalam tema WordPress, header berperan sebagai salah satu bagian utama dalam struktur tampilan website. Karena digunakan berulang di banyak halaman, header sebaiknya tidak ditulis manual di setiap file template.
Itulah kenapa WordPress biasanya memakai file khusus bernama header.php. File ini berfungsi untuk menyimpan kode bagian atas website, lalu bisa dipanggil dari file lain seperti index.php, single.php, page.php, atau archive.php.
Dengan cara ini, struktur tema jadi lebih rapi. Kalau nanti kamu ingin mengubah bagian header, misalnya mengganti tampilan logo atau menambahkan menu navigasi, kamu cukup mengedit file header.php saja.
Jadi, sebelum masuk ke kode, kamu perlu memahami bahwa header bukan hanya bagian visual. Header juga membantu membentuk navigasi, identitas website, dan struktur dasar dari tema WordPress yang sedang kamu buat.
Fungsi header.php pada Tema WordPress
Dalam tema WordPress, header.php adalah file yang digunakan untuk menyimpan bagian atas website.
File ini biasanya berisi struktur awal HTML, bagian <head>, meta viewport, fungsi wp_head(), tag pembuka <body>, sampai elemen visual seperti nama website, logo, dan menu navigasi.
File header.php dibuat agar kode header tidak perlu ditulis berulang-ulang di setiap file template.
Jadi, ketika kamu membuat file seperti index.php, single.php, page.php, atau archive.php, kamu cukup memanggil header dengan fungsi:
<?php get_header(); ?>
Fungsi get_header() akan mengambil isi file header.php dan menampilkannya di bagian atas halaman. Dengan begitu, semua halaman bisa memakai header yang sama tanpa harus menyalin kode secara manual.
Ini membuat struktur tema menjadi lebih rapi dan mudah dikelola.
Misalnya suatu saat kamu ingin mengubah logo, menambahkan menu baru, atau memperbaiki struktur bagian atas website, kamu hanya perlu mengedit file header.php.
Selain bagian tampilan, header.php juga berisi beberapa fungsi penting WordPress. Salah satunya adalah wp_head().
Fungsi ini wajib diletakkan sebelum tag penutup </head>, karena banyak fitur WordPress dan plugin membutuhkan bagian ini untuk menambahkan script, style, meta tag, atau kode penting lainnya.
Selain itu, biasanya file header.php juga memakai fungsi body_class() pada tag <body>.
Fungsi ini membantu WordPress menambahkan class otomatis sesuai halaman yang sedang dibuka.
Class tersebut bisa digunakan untuk mengatur tampilan halaman tertentu dengan CSS.
Jadi, header.php bukan hanya file untuk menampilkan bagian atas website. File ini juga menjadi bagian penting dalam struktur tema WordPress, karena menghubungkan tampilan, fungsi bawaan WordPress, dan kebutuhan plugin yang berjalan di website.
Cara Membuat File header.php
Setelah memahami fungsi header.php, sekarang kita masuk ke bagian praktiknya. Untuk membuat header pada tema WordPress, langkah pertama yang perlu kamu lakukan adalah membuat file baru bernama header.php di dalam folder tema.
Misalnya folder tema kamu bernama tema-saya, maka lokasi filenya kurang lebih seperti ini:
wp-content/themes/tema-saya/header.php
File inilah yang nantinya akan menyimpan bagian atas website. Mulai dari struktur awal HTML, tag <head>, pemanggilan wp_head(), tag pembuka <body>, sampai tampilan header seperti nama website dan menu navigasi.
Setelah file header.php dibuat, kamu bisa memanggilnya dari file template lain menggunakan fungsi:
<?php get_header(); ?>
Biasanya fungsi ini diletakkan di bagian paling atas file seperti index.php, single.php, page.php, atau archive.php.
Contohnya di file index.php:
<?php get_header(); ?>
<main class="site-main">
<!-- Konten website ditampilkan di sini -->
</main>
<?php get_footer(); ?>Dengan cara ini, WordPress akan mengambil isi file header.php lalu menampilkannya di bagian atas halaman. Jadi, kamu tidak perlu menulis ulang struktur header di setiap file template.
Untuk tahap awal, kamu tidak perlu langsung membuat header yang rumit. Cukup buat struktur dasar dulu. Setelah itu, baru tambahkan elemen lain seperti logo, nama website, deskripsi, menu navigasi, atau tombol pencarian.
Intinya, file header.php adalah tempat utama untuk menyimpan bagian atas website. Kalau struktur ini sudah dibuat dengan benar, proses membuat dan mengembangkan header pada tema WordPress akan jauh lebih mudah.
Contoh Kode Header Sederhana
Setelah file header.php dibuat, sekarang kamu bisa mulai mengisinya dengan kode dasar. Untuk tahap awal, kita tidak perlu membuat header yang terlalu rumit. Cukup buat struktur yang rapi dan sesuai kebutuhan dasar tema WordPress.
Berikut contoh kode sederhana untuk file header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<div class="container">
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
<p class="site-description">
<?php bloginfo( 'description' ); ?>
</p>
</div>
</header>Kode di atas sudah cukup untuk membuat header dasar pada tema WordPress. Di dalamnya ada struktur HTML awal, pengaturan bahasa, charset, viewport, fungsi penting WordPress, serta bagian header yang menampilkan nama dan deskripsi website.
Bagian <!DOCTYPE html> digunakan untuk memberi tahu browser bahwa halaman menggunakan HTML5. Lalu, fungsi language_attributes() akan menambahkan atribut bahasa sesuai pengaturan website WordPress.
Pada bagian <head>, ada kode:
<meta charset="<?php bloginfo( 'charset' ); ?>">Kode ini digunakan untuk mengambil pengaturan charset dari WordPress. Biasanya nilainya adalah UTF-8.
Kemudian ada meta viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bagian ini penting agar tampilan website bisa menyesuaikan ukuran layar, terutama saat dibuka dari perangkat mobile.
Fungsi yang tidak boleh dilewatkan adalah:
<?php wp_head(); ?>Fungsi wp_head() wajib diletakkan sebelum tag penutup </head>. Banyak plugin, theme, dan fitur WordPress membutuhkan fungsi ini untuk menambahkan CSS, JavaScript, meta tag, atau kode penting lain ke halaman website.
Lalu pada tag <body>, kita memakai:
<body <?php body_class(); ?>>Fungsi body_class() digunakan untuk menambahkan class otomatis pada tag body. Class ini berguna ketika kamu ingin mengatur tampilan halaman tertentu menggunakan CSS.
Di bagian header, kita menampilkan nama website dengan:
<?php bloginfo( 'name' ); ?>Sedangkan deskripsi website ditampilkan dengan:
<?php bloginfo( 'description' ); ?>Nama website juga diberi link ke homepage menggunakan fungsi home_url(). Jadi ketika pengunjung mengklik nama website di header, mereka akan diarahkan kembali ke halaman utama.
Untuk tahap awal, kode header sederhana seperti ini sudah cukup. Nanti kamu bisa mengembangkannya lagi dengan menambahkan logo, menu navigasi, tombol pencarian, atau desain header yang lebih menarik.
Menampilkan Nama Website dan Deskripsi di Header
Setelah struktur dasar header.php dibuat, bagian berikutnya yang perlu dipahami adalah cara menampilkan nama website dan deskripsi website di header.
Di WordPress, kamu tidak perlu menulis nama website secara manual di dalam kode. WordPress sudah menyediakan fungsi bloginfo() untuk mengambil informasi dari pengaturan website.
Untuk menampilkan nama website, kamu bisa memakai kode berikut:
<?php bloginfo( 'name' ); ?>Kode tersebut akan mengambil nama website dari pengaturan WordPress. Jadi, kalau kamu mengubah nama website melalui dashboard, bagian header juga akan ikut berubah secara otomatis.
Biasanya pengaturan nama website bisa kamu temukan di: Settings > General
atau kalau memakai bahasa Indonesia: Pengaturan > Umum
Selain nama website, kamu juga bisa menampilkan deskripsi singkat atau tagline website dengan kode berikut:
<?php bloginfo( 'description' ); ?>Deskripsi ini biasanya digunakan untuk menjelaskan secara singkat isi atau identitas website. Misalnya, untuk blog pribadi, website berita, atau portal artikel.
Dalam header, nama website sebaiknya diberi link menuju halaman utama. Tujuannya agar ketika pengunjung mengklik nama website atau logo, mereka bisa kembali ke homepage.
Contohnya seperti ini:
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
<p class="site-description">
<?php bloginfo( 'description' ); ?>
</p>Pada kode tersebut, fungsi home_url( ‘/’ ) digunakan untuk mengambil alamat homepage. Lalu esc_url() digunakan untuk memastikan URL yang ditampilkan tetap aman.
Dengan cara ini, header akan menampilkan nama website dan deskripsi secara dinamis. Artinya, kamu tidak perlu mengubah kode setiap kali mengganti nama atau tagline website dari dashboard WordPress.
Untuk tahap awal, menampilkan nama website dan deskripsi seperti ini sudah cukup. Nanti kalau ingin lebih profesional, kamu bisa mengganti nama website dengan logo menggunakan fitur custom logo. Tapi untuk belajar cara membuat header pada tema WordPress, memahami bloginfo() dan home_url() adalah langkah dasar yang penting.
Menambahkan Menu Navigasi di Header
Setelah nama website dan deskripsi tampil, bagian berikutnya yang biasanya ada di header adalah menu navigasi. Menu ini membantu pengunjung berpindah ke halaman lain, seperti Home, About, Contact, kategori artikel, atau halaman penting lainnya.
Di WordPress, menu navigasi sebaiknya tidak ditulis manual satu per satu di file header.php. Lebih baik kita daftarkan dulu lokasi menu di file functions.php, lalu menampilkannya di header menggunakan fungsi wp_nav_menu().
Pertama, buka file functions.php, lalu tambahkan kode berikut:
function tema_saya_setup() {
register_nav_menus(
array(
'primary' => __( 'Menu Utama', 'tema-saya' ),
)
);
}
add_action( 'after_setup_theme', 'tema_saya_setup' );Kode di atas digunakan untuk mendaftarkan lokasi menu bernama primary. Label yang muncul di dashboard WordPress adalah Menu Utama.
Setelah menu didaftarkan, kamu bisa menampilkannya di file header.php. Letakkan kode berikut di dalam bagian <header>:
<nav class="site-navigation">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
)
);
?>
</nav>Pada kode tersebut, theme_location harus sama dengan lokasi menu yang sudah didaftarkan di functions.php, yaitu primary.
Bagian menu_class digunakan untuk memberi class pada daftar menu. Class ini nantinya bisa dipakai untuk mengatur tampilan menu lewat CSS.
Sedangkan container => false digunakan agar WordPress tidak menambahkan elemen pembungkus tambahan secara otomatis.
Setelah kode ditambahkan, kamu bisa masuk ke dashboard WordPress, lalu buka: Tampilan > Menu
atau dalam bahasa Inggris: Appearance > Menus
Buat menu baru, tambahkan halaman atau kategori yang ingin ditampilkan, lalu pilih lokasi menu Menu Utama. Setelah disimpan, menu tersebut akan muncul di bagian header.
Contoh struktur header setelah menu ditambahkan bisa seperti ini:
<header class="site-header">
<div class="container">
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
<p class="site-description">
<?php bloginfo( 'description' ); ?>
</p>
<nav class="site-navigation">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
)
);
?>
</nav>
</div>
</header>Dengan menu navigasi, header akan terasa lebih lengkap. Pengunjung bisa lebih mudah menjelajahi website, dan struktur tema WordPress yang kamu buat juga terlihat lebih rapi.
Mengatur Tampilan Header dengan CSS
Setelah struktur header dan menu navigasi dibuat, langkah berikutnya adalah mengatur tampilannya dengan CSS. Tanpa CSS, header mungkin sudah bisa muncul, tapi tampilannya masih sangat polos.
Kamu bisa menulis kode CSS ini di file style.css tema. Untuk tahap awal, kita buat tampilan header yang sederhana, rapi, dan mudah dibaca.
Contoh CSS dasar untuk header:
.site-header {
background: #ffffff;
border-bottom: 1px solid #eeeeee;
padding: 20px 0;
}
.container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 16px;
}
.site-title {
margin: 0;
font-size: 28px;
line-height: 1.3;
}
.site-title a {
color: #222222;
text-decoration: none;
}
.site-description {
margin: 4px 0 0;
color: #666666;
font-size: 15px;
}Kode di atas akan membuat header terlihat lebih bersih. Bagian .site-header diberi background putih, garis bawah tipis, dan jarak atas bawah. Sedangkan .container digunakan agar isi header tidak terlalu melebar di layar besar.
Untuk menu navigasi, kamu bisa menambahkan CSS seperti ini:
.site-navigation {
margin-top: 16px;
}
.primary-menu {
list-style: none;
display: flex;
gap: 20px;
margin: 0;
padding: 0;
}
.primary-menu li a {
color: #222222;
text-decoration: none;
font-weight: 500;
}
.primary-menu li a:hover {
color: #0073aa;
}Kode tersebut membuat menu tampil sejajar ke samping. Bagian gap: 20px; digunakan untuk memberi jarak antar menu, sedangkan text-decoration: none; menghilangkan garis bawah pada link.
Kalau ingin posisi nama website dan menu berada dalam satu baris, kamu bisa mengubah struktur CSS menjadi seperti ini:
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.site-navigation {
margin-top: 0;
}Dengan CSS tersebut, nama website berada di sebelah kiri, sedangkan menu navigasi berada di sebelah kanan. Tampilan seperti ini cukup umum dipakai pada website blog, company profile, maupun website berita sederhana.
Namun, jangan terlalu fokus membuat desain yang rumit di awal. Sebab yang paling penting adalah memahami hubungan antara kode di header.php dan tampilan yang diatur lewat style.css.
Setelah struktur dasarnya paham, kamu bisa mengembangkan desain header sesuai kebutuhan. Misalnya menambahkan logo, warna brand, tombol pencarian, tombol dark mode, atau menu mobile yang lebih interaktif.
Membuat Tampilan Header Agar Lebih Responsive
Setelah tampilan header dasar dibuat, jangan lupa mengecek tampilannya di perangkat mobile. Ini penting karena banyak pengunjung membuka website lewat HP, jadi header harus tetap rapi dan mudah digunakan di layar kecil.
Header yang terlihat bagus di laptop belum tentu nyaman di HP. Misalnya, menu bisa terlalu panjang, teks terlalu besar, atau layout menjadi sempit karena semua elemen dipaksa tampil sejajar.
Untuk tahap awal, kamu bisa membuat header responsive dengan media query sederhana di file style.css.
Misalnya, kalau sebelumnya nama website dan menu dibuat sejajar seperti ini:
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}Maka untuk tampilan mobile, kamu bisa mengubahnya menjadi satu kolom:
@media (max-width: 768px) {
.site-header .container {
flex-direction: column;
align-items: flex-start;
}
.site-navigation {
width: 100%;
margin-top: 16px;
}
.primary-menu {
flex-direction: column;
gap: 12px;
}
}Kode di atas akan membuat elemen di dalam header turun ke bawah saat layar lebih kecil dari 768px. Nama website tetap berada di atas, lalu menu navigasi muncul di bawahnya.
Untuk menu sederhana, cara ini sudah cukup. Memang belum seperti hamburger menu, tapi sudah jauh lebih nyaman dibanding memaksa semua menu tampil sejajar di layar kecil.
Kamu juga bisa menyesuaikan ukuran judul website agar tidak terlalu besar di HP:
@media (max-width: 768px) {
.site-title {
font-size: 24px;
}
.site-description {
font-size: 14px;
}
}Dengan begitu, tampilan header akan lebih proporsional saat dibuka dari perangkat mobile.
Kalau nanti ingin membuat header yang lebih modern, kamu bisa mengembangkan menu menjadi hamburger menu menggunakan JavaScript. Tapi untuk tahap awal, membuat menu turun ke bawah di layar kecil sudah cukup sebagai langkah awal.
Intinya, header yang responsive membantu pengunjung menjelajahi website dengan lebih nyaman.
Jadi, setiap kali kamu membuat atau mengubah desain header, jangan hanya mengecek tampilan desktop, tapi pastikan juga tampilannya tetap rapi di HP.
Kesalahan Pemula Saat Membuat Header WordPress
Saat belajar membuat header pada tema WordPress, wajar kalau ada beberapa bagian yang terasa membingungkan. Apalagi file header.php berisi struktur penting seperti tag <head>, wp_head(), tag <body>, nama website, dan menu navigasi.
Agar tidak salah langkah, berikut beberapa kesalahan yang sering dilakukan pemula.
1. Lupa Menambahkan wp_head()
Kesalahan pertama yang cukup sering terjadi adalah lupa menambahkan fungsi wp_head() di dalam file header.php.
Padahal, fungsi ini sangat penting karena digunakan WordPress dan plugin untuk menambahkan script, style, meta tag, atau kode lain yang dibutuhkan website.
Fungsi wp_head() sebaiknya diletakkan sebelum tag penutup </head> seperti ini:
<?php wp_head(); ?>
</head>2. Tidak Menggunakan body_class()
Kesalahan berikutnya adalah tidak memakai body_class() pada tag <body>. Fungsi ini berguna untuk menambahkan class otomatis sesuai halaman yang sedang dibuka.
Contohnya:
<body <?php body_class(); ?>>Class yang dihasilkan WordPress bisa membantu saat kamu ingin mengatur tampilan halaman tertentu menggunakan CSS. Misalnya membedakan tampilan homepage, halaman artikel, halaman kategori, atau halaman statis.
3. Menulis Menu Secara Manual
Sebagian pemula kadang langsung menulis menu secara manual di header.php, misalnya dengan membuat daftar link satu per satu.
Cara ini memang bisa berjalan, tapi kurang fleksibel. Kalau nanti ingin mengubah menu, kamu harus mengedit kode lagi. Lebih baik daftarkan menu di functions.php, lalu tampilkan menggunakan wp_nav_menu().
Dengan cara ini, menu bisa diatur langsung dari dashboard WordPress tanpa harus mengubah file tema setiap kali ingin menambah atau menghapus link.
4. Header Terlalu Ramai
Header yang terlalu ramai bisa membuat pengunjung bingung. Misalnya terlalu banyak menu, terlalu banyak tombol, banner besar, ikon media sosial berlebihan, atau elemen yang sebenarnya tidak terlalu penting.
Untuk tahap awal, lebih baik buat header yang sederhana dulu. Cukup tampilkan nama website atau logo, deskripsi jika perlu, dan menu navigasi utama. Setelah itu, baru tambahkan elemen lain kalau memang dibutuhkan.
5. Tidak Mengecek Tampilan Mobile
Header sering terlihat rapi di laptop, tapi berantakan saat dibuka lewat HP. Menu bisa terlalu panjang, logo terlalu besar, atau elemen header saling menumpuk.
Karena itu, setiap kali membuat atau mengubah header, selalu cek tampilan mobile. Gunakan media query sederhana agar menu dan elemen header tetap nyaman dilihat di layar kecil.
6. Salah Menaruh Kode Header
Kesalahan lain adalah menaruh semua kode header langsung di index.php, single.php, atau page.php. Padahal, lebih rapi kalau bagian header dipisahkan ke file header.php.
Dengan memisahkan header ke file khusus, kamu cukup memanggilnya menggunakan get_header(). Struktur tema jadi lebih bersih dan mudah dikelola.
Intinya, saat membuat header pada tema WordPress, pastikan struktur dasarnya sudah benar. Jangan lupa menambahkan wp_head(), gunakan body_class(), tampilkan menu dengan wp_nav_menu(), dan cek tampilan mobile agar header tetap nyaman digunakan.
Kesimpulan
Header adalah salah satu bagian penting dalam tema WordPress. Bagian ini berada di atas website dan biasanya berisi identitas utama seperti nama website, logo, deskripsi, serta menu navigasi.
Dalam proses cara membuat header pada tema WordPress, file utama yang perlu kamu pahami adalah header.php. File ini digunakan untuk menyimpan struktur bagian atas website agar tidak perlu ditulis berulang-ulang di setiap file template.
Dengan header.php, kamu bisa memanggil bagian header menggunakan fungsi get_header() dari file seperti index.php, single.php, page.php, atau archive.php. Cara ini membuat struktur tema menjadi lebih rapi dan mudah dikelola.
Saat membuat header, jangan lupa menambahkan fungsi penting seperti wp_head() dan body_class().
Dua fungsi ini membantu WordPress, theme, dan plugin bekerja dengan lebih baik di dalam website.
Setelah struktur dasar header selesai, kamu bisa mengembangkannya lagi. Misalnya dengan menambahkan logo, menu navigasi, tombol pencarian, warna brand, atau membuat tampilan header menjadi responsive agar tetap nyaman dibuka lewat HP.
Jadi, kalau kamu sedang belajar membuat tema WordPress sendiri, memahami file header.php adalah langkah penting. Mulai dulu dari header sederhana, lalu kembangkan tampilannya sedikit demi sedikit sesuai kebutuhan website.
FAQ Seputar Header WordPress
Berikut adalah pertanyaan yang sering ditanyakan seputar cara membuat header pada tema WordPress:
Apa fungsi header.php di WordPress?
header.php digunakan untuk menyimpan bagian atas website dalam tema WordPress. File ini biasanya berisi struktur awal HTML, tag <head>, fungsi wp_head(), tag pembuka <body>, logo, nama website, dan menu navigasi.
Dengan adanya file ini, kamu tidak perlu menulis kode header berulang-ulang di setiap file template.
Apakah header.php wajib dibuat?
Untuk tema WordPress yang rapi, header.php sangat disarankan dibuat. Secara teknis, kamu memang bisa menulis struktur header langsung di index.php, tapi cara itu kurang rapi dan sulit dikelola.
Lebih baik pisahkan bagian header ke file header.php, lalu panggil menggunakan get_header().
Apa fungsi get_header()?
get_header() adalah fungsi WordPress untuk memanggil file header.php. Biasanya fungsi ini diletakkan di bagian paling atas file template seperti index.php, single.php, page.php, atau archive.php.
Contohnya:
<?php get_header(); ?>
Dengan kode tersebut, WordPress akan menampilkan isi file header.php di bagian atas halaman.
Apa fungsi wp_head()?
wp_head() adalah fungsi penting yang harus ada di dalam file header.php, tepat sebelum tag penutup </head>.
Fungsi ini digunakan WordPress, theme, dan plugin untuk menambahkan kode penting seperti CSS, JavaScript, meta tag SEO, script analytics, dan kode lain yang dibutuhkan website.
Bagaimana cara menampilkan menu di header WordPress?
Untuk menampilkan menu di header, kamu perlu mendaftarkan lokasi menu di functions.php, lalu memanggilnya di header.php menggunakan wp_nav_menu().
Dengan cara ini, menu bisa diatur langsung dari dashboard WordPress tanpa harus mengedit kode setiap kali ingin menambahkan atau menghapus menu.
Apakah header harus responsive?
Iya, sebaiknya header dibuat responsive. Banyak pengunjung membuka website dari HP, jadi header harus tetap rapi di layar kecil.
Minimal, pastikan logo atau nama website tidak terlalu besar, menu tidak berantakan, dan elemen header bisa menyesuaikan ukuran layar.
