Categories
Trik WordPress

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:

Lalu kita ganti deh dengan ini:

 '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…

By Lutvi

Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

46 replies on “Membuat Custom Menu Navigasi”

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…

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

sebelum kode

‘sidebar1’,

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

By 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

By Post Author

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

Perhatikan bagian ini:

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

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

By Post Author

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

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……

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.

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

By Post Author

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…

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

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..

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

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’ ),
) );

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 ?

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.

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.

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

Comments are closed.