Jika Anda lihat pada WordPress Dashboard, menu untuk mengatur WordPress Menus tidak ada. Ini terjadi karena penggunaan menu belum dilakukan.
Registrasi Menus dilakukan pada functions.php. Kita akan registrasikan 3 menu, 1 untuk main header, 2 untuk footer.
function aftertheme(){
register_nav_menu('headerMenu', 'Header Menu');
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'aftertheme');
Lalu buka WordPress Dashboard, buka menu Appearance – Menus. Buat menu baru dengan memberi nama pada field Menu Name, Lalu tekan Create Menu. (lihat gambar dibawah).
Lalu pilih page yang akan ditampilkan pada menu (lihat navigasi bagian kiri, pilih tab View All). Pada contoh kita pilih Privacy Policy dan About Us. Lalu click Add to Menu.
Lalu pilih Display location dengan mencentang Header Menu. Ingat Header Menu ini adalah lokasi menu yang kita registrasikan melalui functions.php.
Setelah itu kita tekan Save Menu. Menu sudah selesai dibuat.
Berikutnya buka file header.php, karena code untuk menampilkan header menu ada disini. Gunakan fungsi WordPress wp_nav_menu(array) untuk menampilkan menu yang telah kita buat diatas.
Untuk menu hardcode dari latihan sebelumnya, dapat dibuang. (lihat code dibawah bagian yang dijadikan komentar).
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset= "<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<div class="container">
<h1 class="school-logo-text float-left"><a href="<?php echo site_url();?>"><strong>Fictional</strong> University</a></h1>
<span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
<i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
<div class="site-header__menu group">
<nav class="main-navigation">
<?php wp_nav_menu(array(
'theme_location' => 'headerMenu'
));
?>
<!--
<ul>
<li><a href="<?php echo site_url('/about-us');?>">About Us</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Campuses</a></li>
<li><a href="#">Blog</a></li>
</ul>
-->
</nav>
<div class="site-header__util">
<a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
<a href="#" class="btn btn--small btn--dark-orange float-left">Sign Up</a>
<span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
</div>
</div>
</div>
</header>
Buat juga 2 menu untuk footer menu, jangan lupa, untuk menampilkan footer menu, file yang harus diubah adalah footer.php.
<footer class="site-footer">
<div class="site-footer__inner container container--narrow">
<div class="group">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color"><a href="<?php echo site_url();?>"><strong>Fictional</strong> University</a></h1>
<p><a class="site-footer__link" href="#">555.555.5555</a></p>
</div>
<div class="site-footer__col-two-three-group">
<div class="site-footer__col-two">
<h3 class="headline headline--small">Explore</h3>
<nav class="nav-list">
<?php
wp_nav_menu(array(
'theme_location' => 'FooterMenu1'
));
?>
</nav>
</div>
<div class="site-footer__col-three">
<h3 class="headline headline--small">Learn</h3>
<nav class="nav-list">
<?php
wp_nav_menu(array(
'theme_location' => 'FooterMenu2'
));
?>
</nav>
</div>
</div>
<div class="site-footer__col-four">
<h3 class="headline headline--small">Connect With Us</h3>
<nav>
<ul class="min-list social-icons-list group">
<li><a href="#" class="social-color-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#" class="social-color-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Jika setelah selesai diubah, maka tampilan web kurang lebih seperti berikut.
Kesimpulan
Anda dapat menggunakan WordPress Menus sistem atau menggunakan code yang Anda buat sendiri. Jika Anda ingin membuat theme untuk bisa dipakai semua orang, maka dianjurkan untuk menggunakan Menus sistem dari WordPress.