Cara membuat custom menu Wordress pada Bootstrap

Membuat custom theme sendiri menurut saya lebih mudah daripada memakai theme yang dibuat oleh developer lain, itu karena kita harus mempelajari struktur koding nya. Daripada seperti itu, lebih baik bikin sendiri 😀 . Nah, salah satu fitur yang wajib ada dan sangat penting adalah Menu.

Karna theme yang kita buat adalah custom theme, maka kita harus membuat menu nya sendiri juga 😀 . Wah, tambah pusing deh kalo bikin dari awal. Jangan khawatir, saat ini udah banyak developer yang membagikan kodingnya dalam hal ini membuat custom menu. Caranya cukup mudah ternyata, ya iya lah mudah kan orang lain yang bikin kodingnya hehehe.

Oia tutorial ini untuk Bootstrap 3.x

Langsung aja ya step-step nya:

1. Download terlebih dahulu kodingnya disini, wp-bootstrap-navwalker kemudian extrak file nya.

2.  Setelah diextrak copy paste file wp-bootstrap-navwalker.php ke folder theme kamu, misal themekamu/ library/wp-bootstrap-navwalker.php , library adalah nama folder. Kita bebas ngasih nama foldernya pastikan ingat selalu dimana file wp-bootstrap-navwalker.php nya 😀

3. Setelah file wp-bootstrap-navwalker.php di copy paste ke folder library, saatnya memanggil file tersebut melalui file functions.php.

// Register Custom Navigation Walker
require_once get_template_directory() . '/library/wp-bootstrap-navwalker.php';

4.  Sekarang coba refresh halaman untuk memastikan engga ada error gagal memanggil file di functions.php. Gimana? tidak ada error? Baiklah, kita lanjut ke step berikutnya yaitu menampilkan custom menu ke theme.

5. Buka file header.php , ganti script default Bootstrap kamu dengan script di bawah ini.

<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo home_url(); ?>">
<?php bloginfo('name'); ?>
</a>
</div>

<?php wp_nav_menu( array( 'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker())
);
?>
</div>

</nav>

Sekarang refresh lagi halaman browser kamu untuk melihat hasil belajar membuat custom menu untuk Bootstrap 3.x, apakah sesuai dengan gambar di bawah ini?

Kalo masih ada error juga, mungkin kamu bisa lihat source code nya dengan mendownload disini bootstrap-3 

Jika masih mengalami kesulitan, komentar ya 🙂