Membuat Custom Menu Navigasi

Mulai artikel ini hingga artikel mendatang, saya akan sharing beberapa tips untuk membuat theme kita lebih canggih hehehe… Pertama, saya akan sharing bagaimana cara memasang custom menu di themes sederhana yang sudah kita buat sebulan terakhir kemarin. Walaupun canggih, tapi caranya mudah banget lho.. xixixi…

Pertama, kita deklarasikan dulu custom menunya di functions.php (masih ingat kan?) cukup tambahkan kode ini di bawah file functions.php:

register_nav_menus( array(
    'primary' => __( 'Navigasi Utama', 'themegue' ),
  ) );

Tulisan Navigasi Utama adalah nama lokasi yang akan kita masukkan custom menu. Sedangkan themegue ya nama themesnya 🙂 Untuk primary adalah nama identitas menu-nya.

Sekarang kita tinggal tentukan mau dipasang dimana custom menu-nya. Kalau dari theme yang kita buat, berarti pasangnya di bagian header. Kita cari dulu kode ini:

<ul>
<li><a href="<?php bloginfo('url');?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>

Lalu kita ganti deh dengan ini:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

Nah, coba deh cek menu Appearance – Menu di wp-admin anda. Insya Allah anda sudah bisa memfungsikan custom menunya hehehe…

Dicari dengan kata kunci:

navigasi php,membuat menu navigasi wordpress,membuat menu navigasi dengan php,membuat menu navigasi php,cara meletakkan custom menu di bawah header,membuat navbar di wordpress,cara membuat navibar di wordpress,cara membuat custom menu pada wordpress,cara membuat menu wordpress theme,cara membuat menu navigasi wordpress

46 thoughts on “Membuat Custom Menu Navigasi

  1. masRub

    wow… kerne tutorial nya mas Lutvi…
    sekian lama tdk berkunjung ke CafeBisnis network blog, ckckckck…. never ending lah mr satu ini… sukses mas Lutvi… saya ijin copas materinya buat dipelajari manual (offline).. Cool abiss….
    Sukses mas Lutvi…

  2. Zapra Corporation

    Kalo di file theme nya tidak ada function.php gmn ya?
    saya cek file theme saya, ternyata tidak ada file function.php..
    mohon pencerahan nya..
    terima kasih..

  3. 2 Wings

    Gan Saya Udah Taru Di Function.php

    Kaya Gini

    'sidebar1',
            'before_widget' => '',
            'after_widget' => '',
            'before_title' => '',
            'after_title' => '',
    ));
    
    register_nav_menus( array(
        'primary' => __( 'Navigasi Utama', 'WPsimpy WordPress Theme' ),
    ));
    
    function valid_search_form ($form) {
        return str_replace('role="search" ', '', $form);
    }
    add_filter('get_search_form', 'valid_search_form');
    
    ?>
    

    Terus Kok Jadinya Kayak Gini

    
    Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ')' in C:\xampp\htdocs\wp\wp-content\themes\WPsimpy-Theme\functions.php on line 12

    Please Help !
    saya pake tema WPsimpy-Theme

    1. admin Post author

      Kayaknya anda salah masukkan tanda petik. Itu bukan tanda petik standart tapi petik miring. Udah beda tuh.

        1. admin Post author

          sebelum kode

          ‘sidebar1’,

          apa isinya? apa bener isi functions.php-nya cuma gitu doang. Kalau ya berarti disitulah salahnya

          1. admin Post author

            Kalau gitu hapus aja kode yang ini:

            'sidebar1',
            'before_widget' => '',
            'after_widget' => '',
            'before_title' => '',
            'after_title' => '',
            ));

            Karena disitulah masalahnya. Itu yang pasang kodenya siapa? Anda sendiri atau memang dari sono-nya

  4. agus hendartono

    sudah tak masukan sama persis pak
    di functions.php isinya jadi begini

     'Sidebar Lebar',
        'id' => 'sidebar-lebar',
        'description' => 'Sidebar dengan lebar 350px terletak paling atas',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
      ) );
      
      register_sidebar( array(
        'name' => 'Sidebar Kiri',
        'id' => 'sidebar-kiri',
        'description' => 'Sidebar kiri dengan lebar 170px terletak di bawah sidebar lebar',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
      ) );
    
      register_sidebar( array(
        'name' => 'Sidebar Kanan',
        'id' => 'sidebar-kanan',
        'description' => 'Sidebar kanan dengan lebar 170px terletak di bawah sidebar lebar, di sebelah kanan sidebar kiri',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
      ) );
      
    }
    add_action( 'widgets_init', 'masjidku_widgets' );
    ?>
    
    register_nav_menus( array(
        'primary' => __( 'Navigasi Utama', 'masjidku' ),
      ) );
    

    tapi kok pas lihat hasilnya, dihalaman depan malah muncul tulisan begini di atas header
    register_nav_menus( array( ‘primary’ => __( ‘Navigasi Utama’, ‘masjidku’ ), ) );

    salah apanya ya pak?
    tutorial yang sebelum2nya sih lancar jaya, makasih banyak, tutorialnya luar biasa

    1. admin Post author

      Perhatikan bagian ini:

      add_action( ‘widgets_init’, ‘masjidku_widgets’ );
      ?>
      

      seharusnya jangan ditutup dulu tag PHP-nya. Hapus kode ?> dan pindahin ke bawah sendiri

      1. johan

        wah, mas lutvi bukan hanya bloger yang pinter, tapi coding phpnya juga mahir… mantaps master. 😉 semangat terus berkarya ! aku mengikuti mu.

  5. 2 Wings

    Gan Menunya udah jadi… (kalau Di buka Di Google Chrome)
    Tapi Kok kalau di buka di Firefox, tampilannya malah ancur sih gan….

    (untuk sementara ini saya menggunakan tema lama milik saya yg berat banget)

    Jadi Untuk Para Master Tolong Bantuannya Yach……

  6. ahmadfuad

    Tutorialnya oke,cara buat menu,memang butuh bangat,tapi masih trauma,blog saya pernah Eror gara-gara salah masukan code,gimana cara supaya gampang cari code HTML di worpres,biar tidak salah pasang,terimakasih.

    1. Lutvi Avandi Post author

      Error itu nggak usah ditakutkan. Biasa tuh error kalau urusan sama kode. Tapi yang perlu diperhatikan adalah apa saja yang anda rubah. Kalau belum mahir, jangan terlalu banyak melakukan perubahan. Rubah sedikit lalu lihat hasilnya. Rubah dikit lagi dan lihat hasilnya

  7. kurniawan

    Thx banget buat tutorialnya mas enak banget buat yang masih pemula kayak saya.
    Sampai sini saya coba. Selama ngikutin tutorialnya sampe bagian ini alhamdulillah g terlalu banyak trouble, cuma pas saya isi komentar setelah di submit keluar pesan

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\WordPress\wp-content\themes\themegue\functions.php:39) in C:\xampp\htdocs\WordPress\wp-includes\pluggable.php on line 934

    Tapi setelah saya cek lagi komen berhasil disimpan, mohon pencerahannya guru…

  8. rizqo

    om, kenapa setiap pke template wordpress yang free ketika dipakai menu home nya hilang, tolong gmana caranya memunculkan menu home lagi

  9. arih

    gan, mau nanya..
    kalo mau bikin highlight menunya bagaimana? saya buat #menu li:active a> {..}
    tapi tidak ada perubahan, kalo li:hover lancar jaya..
    mohon bantuannya…
    terimakasih..

    1. arih

      udah solved ga,,hehehhee
      ane tambahin kode ini :
      #menu li a:hover,
      #menu li a:active,
      #menu .current_page_item a,
      #menu .current-cat a,
      #menu .current-menu-item a {

      color: #fff;
      }

      btw artikelnya sangat membantu, terimakasih banyak.. sukses

  10. agung

    Tolong gan,pnya saya ini apanya yang salah? sampe pusing ane nyarinya gk nemu nemu.Sebelum ane kasih register navbar lancar lancar aja,tp stlah ane tambahin register navbar tampilannya jadi Call to undefined function register_nav_menus() in C:\xampp\htdocs\smkgamaliel\wp-content\themes\themegue\functions.php on line 36
    ‘Sidebar Lebar’,
    ‘id’ => ‘sidebar-lebar’,
    ‘description’ => ‘Sidebar dengan lebar 300px terletak paling atas’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );

    register_sidebar( array(
    ‘name’ => ‘Sidebar Kiri’,
    ‘id’ => ‘sidebar-kiri’,
    ‘description’ => ‘Sidebar kiri dengan lebar 145px terletak di bawah sidebar lebar’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );

    register_sidebar( array(
    ‘name’ => ‘Sidebar Kanan’,
    ‘id’ => ‘sidebar-kanan’,
    ‘description’ => ‘Sidebar kanan dengan lebar 145px terletak di bawah sidebar lebar, di sebelah kanan sidebar kiri’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ) );

    }
    add_action( ‘widgets_init’, ‘themegue_widgets’ );

    register_nav_menus( array(
    ‘primary’ => __( ‘Navigasi Utama’, ‘themegue’ ),
    ) );

  11. aziz

    Mas, biar widgetnya bisa otomatis gmn ya ?? itu kan didefinisikan pake get_search_form(); wp_get_archives( ‘type=monthly’ ); dll ya ? biar bisa diatur dari dashboard gmn ?

  12. use this link

    I just want to say I am just very new to blogs and absolutely loved your web page. Probably I’m going to bookmark your site . You amazingly come with wonderful writings. Kudos for revealing your blog site.

  13. Lean Sedore

    Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a little bit, but instead of that, this is great blog. A fantastic read. I will certainly be back.

  14. Mahalia Avilez

    I think this is one of the most significant info for me. And i’m glad reading your article. But wanna remark on some general things, The web site style is wonderful, the articles is really nice : D. Good job, cheers

  15. Sylvester Jedrey

    Great blog here! Also your web site loads up fast! What web host are you using? Can I get your affiliate link to your host? I wish my web site loaded up as fast as yours lol

Comments are closed.