WPBeginner’da, sayısız okuyucunun WordPress sitelerini kullanıcı deneyimini iyileştirmek, markalaşmayı artırmak ve dönüşümleri teşvik etmek için özelleştirmelerine yardımcı olduk. Ve doğru yapıldığında, türünün tek örneği bir navigasyon menüsünün etkileşimi artırmaya ve insanları sitenizde daha uzun süre tutmaya yardımcı olabileceğini gördük.
Sorun şu ki, tüm WordPress temalarında gezinti menüsünü görüntüleyebileceğiniz belirli konumlar vardır, bu nedenle bunu değiştirmek zor olabilir. Bu durum özellikle yeni başlayanlar için geçerlidir çünkü tema dosyalarını değiştirmek hassas bir süreçtir.
Bir blok tema kullanıyorsanız, bunu Tam Site Düzenleyicisi ile yapabilirsiniz. Ancak deneyimlerimize göre, tüm tema türleri için işe yarayacak daha iyi seçenekler var.
Örneğin, gelişmiş özelleştirmeler istiyorsanız SeedProd gibi güçlü bir sayfa oluşturucu kullanabilirsiniz. Ya da özel kod kullanmanın basit bir yolunu arıyorsanız, WPCode açık ara en iyi seçimdir.
Bu makalede, WordPress temanızın herhangi bir alanına nasıl özel bir navigasyon menüsü ekleyeceğinizi göstereceğiz. İhtiyaçlarınıza en uygun öğreticiyi seçebilmeniz için size 3 farklı seçenek sunacağız.
WordPress Temalarına Neden Özel Navigasyon Menüleri Eklemelisiniz?
Navigasyon menüsü, web sitenizin önemli alanlarına işaret eden bağlantıların bir listesidir. Ziyaretçilerin ilginç içerikleri bulmasını kolaylaştırır, bu da sayfa görüntülemelerini artırabilir ve WordPress’te hemen çıkma oranını azaltabilir.
Menünüzün tam konumu WordPress temanıza göre değişecektir. Çoğu temanın çeşitli seçenekleri vardır, böylece farklı menüler oluşturabilir ve bunları farklı konumlarda gösterebilirsiniz.
Mevcut WordPress temanızda menüleri nerede görüntüleyebileceğinizi görmek için Görünüm ” Menüler bölümüne gidin ve ardından ‘Görüntüleme konumu’ bölümüne bir göz atın.
Aşağıdaki görselde Astra WordPress teması tarafından desteklenen konumlar gösterilmektedir.
Bazen, temanızda ‘Görüntüleme konumu’ olarak listelenmeyen bir alanda bir menü göstermek isteyebilirsiniz.
Bunu akılda tutarak, WordPress temanızın herhangi bir alanına nasıl özel bir navigasyon menüsü ekleyeceğinize bir göz atalım. Tercih ettiğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:
Yöntem 1: Tam Site Düzenleyicisini Kullanma (Yalnızca Blok Tabanlı Temalar)
ThemeIsle Hestia Pro gibi bir blok tema kullanıyorsanız, Tam Site Düzenleme (FSE) ve blok düzenleyiciyi kullanarak özel bir gezinme menüsü ekleyebilirsiniz.
Daha fazla ayrıntı için en iyi WordPress tam site düzenleme temaları yazımıza bakabilirsiniz.
Bu yöntem her temayla çalışmaz ve menünün her bölümünü özelleştirmenize izin vermez. Herhangi bir WordPress temasına tamamen özel bir menü eklemek istiyorsanız, bunun yerine bir sayfa oluşturucu eklentisi kullanmanızı öneririz.
Blok tabanlı bir tema kullanıyorsanız Görünüm “ Düzenleyici bölümüne gidin.
Varsayılan olarak, tam site düzenleyicisi temanızın ana şablonunu gösterir, ancak herhangi bir alana bir gezinme menüsü ekleyebilirsiniz.
Mevcut tüm seçenekleri görmek için ‘Şablonlar’, ‘Desenler’ veya ‘Sayfalar’ seçeneklerinden birini seçmeniz yeterlidir.
Artık özel bir gezinti menüsü eklemek istediğiniz şablona, şablon bölümüne veya sayfaya tıklayabilirsiniz.
WordPress şimdi tasarımın bir önizlemesini gösterecektir. Bu şablonu düzenlemek için küçük kalem simgesine tıklayın.
Bir sonraki adım, menünüzü göstermek istediğiniz alana bir Navigasyon bloğu eklemektir.
Sol üst köşedeki mavi ‘+’ düğmesine tıklayın.
Şimdi, devam edin ve arama çubuğuna ‘Navigasyon’ yazın.
‘Navigasyon’ bloğu göründüğünde, bunu düzeninize sürükleyip bırakmanız yeterlidir.
Ardından, Navigasyon bloğunu seçmek için tıklayın.
Görüntülemek istediğiniz menüyü zaten oluşturduysanız, Navigasyon bloğunu seçmek için tıklayın. Sağ taraftaki menüde, ‘Menü’nün yanındaki üç noktalı simgeye tıklayın.
Daha sonra açılır menüden bir menü seçebilirsiniz.
Diğer bir seçenek de sayfalar, yazılar, özel bağlantılar ve daha fazlasını ekleyerek tam site düzenleyicisi içinde bir menü oluşturmaktır. Yeni menüye öğe eklemek için ‘+’ simgesine tıklamanız yeterlidir.
Bu, herhangi bir gönderi veya sayfa eklediğiniz ve bu bağlantıların yeni bir sekmede açılıp açılmayacağına karar verdiğiniz bir açılır pencere açar.
Ayrıca WordPress menüsüne bir arama çubuğu ekleyebilir, sosyal medya simgeleri ekleyebilir ve daha fazlasını yapabilirsiniz. Açılır pencerede, menüye eklemek istediğiniz bloğu yazmanız ve göründüğünde doğru seçeneği seçmeniz yeterlidir.
Daha sonra mini araç çubuğundaki ve sağ taraftaki menüdeki ayarları kullanarak bu bloğu yapılandırabilirsiniz. Menüye daha fazla öğe eklemek için bu adımları tekrarlamanız yeterlidir.
Menünün nasıl göründüğünden memnun olduğunuzda, ‘Kaydet’ düğmesine tıklamanız yeterlidir.
Siteniz artık yeni şablonu kullanacak ve ziyaretçiler özel navigasyon menünüzle etkileşime girebilecek.
Yöntem 2: Sayfa Oluşturucu Eklentisi Kullanma (Tüm Temalarla Çalışır)
Tam site editörü, blok tabanlı temalara menüler eklemenize olanak tanır. Ancak, herhangi bir WordPress temasına gelişmiş, tamamen özelleştirilebilir bir menü eklemek istiyorsanız, bir sayfa oluşturucu eklentisine ihtiyacınız olacaktır.
SeedProd, navigasyon menünüzün her bölümünü özelleştirmenize olanak tanıyan piyasadaki en iyi WordPress sayfa oluşturucu eklentisidir.
Özel navigasyon menüleri, açılış sayfaları ve çok daha fazlasını oluşturmak için bu aracı kullanma konusunda kapsamlı deneyime sahibiz. Daha fazla ayrıntı için SeedProd incelememizin tamamına göz atın.
Sayfalar söz konusu olduğunda, SeedProd başlangıç noktası olarak kullanabileceğiniz 350’den fazla profesyonelce tasarlanmış şablonla birlikte gelir. Bir şablon seçtikten sonra, SeedProd’un hazır Nav Menu bloğunu kullanarak sitenize özel bir navigasyon menüsü ekleyebilirsiniz.
Öncelikle SeedProd eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Not: SeedProd ‘un kod yazmadan özel navigasyon menüleri oluşturmanıza olanak tanıyan ücretsiz bir sürümü de vardır. Ancak, bu kılavuzda, Nav Menu bloğunun yanı sıra ekstra şablonlar ve gelişmiş özelliklere sahip olduğu için SeedProd Pro’yu kullanacağız.
Eklentiyi etkinleştirdikten sonra SeedProd sizden lisans anahtarınızı isteyecektir.
Bu bilgiyi SeedProd web sitesindeki hesabınızda bulabilirsiniz. Anahtarı girdikten sonra ‘Anahtarı Doğrula’ butonuna tıklayın.
Bunu yaptıktan sonra, SeedProd ” Açılış Sayfaları ‘na gidin ve ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklayın.
Artık özel sayfanız için bir şablon seçebilirsiniz.
Doğru tasarımı bulmanıza yardımcı olmak için SeedProd’un tüm şablonları, çok yakında ve potansiyel müşteri sıkıştırma kampanyaları gibi farklı kampanya türlerine göre düzenlenmiştir. SeedProd’un şablonlarını 404 sayfanızı geliştirmek için bile kullanabilirsiniz.
Herhangi bir tasarıma daha yakından bakmak için farenizi o şablonun üzerine getirin ve ardından büyüteç simgesine tıklayın.
Kullanmak istediğiniz bir tasarım bulduğunuzda, ‘Bu Şablonu Seç’e tıklayın.
Biz tüm görsellerimizde ‘Kara Cuma Satış Sayfası’ şablonunu kullanıyoruz, ancak siz istediğiniz şablonu kullanabilirsiniz.
Bir şablon seçtikten sonra, bu özel sayfa için bir isim yazın. SeedProd otomatik olarak sayfanın başlığına göre bir URL oluşturacaktır, ancak bu URL’yi istediğiniz herhangi bir şeyle değiştirebilirsiniz.
Örneğin, arama motorlarının sayfanın ne hakkında olduğunu anlamasına yardımcı olmak için alakalı anahtar kelimeler ekleyebilirsiniz. Bu, WordPress SEO ‘nuzu geliştirebilir ve arama motorunun sayfayı tıpkı sizinki gibi içerik arayan kişilere göstermesine yardımcı olabilir.
Bu bilgileri girdikten sonra ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklayın.
Çoğu şablon, tüm SeedProd sayfa düzenlerinin temel bileşenleri olan bazı blokları zaten içerir.
Bir bloğu özelleştirmek için sayfa düzenleyicisinde seçmek üzere tıklamanız yeterlidir.
Sol taraftaki araç çubuğu artık o blok için tüm ayarları gösterecektir. Örneğin, aşağıdaki resimde bir ‘Başlık’ bloğunun içindeki metni değiştiriyoruz.
Sol taraftaki menüde yer alan ayarları kullanarak metni biçimlendirebilir, hizalamasını değiştirebilir, bağlantılar ekleyebilir ve daha fazlasını yapabilirsiniz.
‘Gelişmiş’ sekmesini seçerseniz, daha da fazla ayara erişebilirsiniz. Örneğin, kutu gölgeleri ve CSS animasyonları ekleyerek bloğun gerçekten öne çıkmasını sağlayabilirsiniz.
Tasarımınıza yeni bloklar eklemek için sol taraftaki menüden herhangi bir bloğu bulup sayfaya sürüklemeniz yeterlidir. Bir bloğu silmek istiyorsanız, o bloğu seçmek için tıklayın ve ardından çöp kutusu simgesini kullanın.
Özel bir navigasyon menüsü oluşturmak istediğimizden, sayfaya bir ‘Nav Menu’ bloğu sürükleyin.
Bu, tek bir varsayılan ‘Hakkında’ öğesi içeren bir gezinme menüsü oluşturur.
Artık SeedProd editöründe yeni bir menü oluşturabilir veya WordPress kontrol panelinde daha önce oluşturduğunuz bir menüyü seçebilirsiniz.
Daha önce oluşturduğunuz bir menüyü göstermek için devam edin ve ‘WordPress Menüsü’ düğmesine tıklayın. Şimdi ‘Menüler’ açılır menüsünü açabilir ve listeden herhangi bir seçeneği seçebilirsiniz.
Bundan sonra, sol taraftaki menüdeki ayarları kullanarak yazı tipi boyutunu, metin hizalamasını ve daha fazlasını değiştirebilirsiniz.
Bunun yerine SeedProd içinde yeni bir menü oluşturmak istiyorsanız, ‘Basit’ düğmesini seçin.
Ardından, SeedProd’un varsayılan olarak oluşturduğu ‘Hakkında’ öğesini genişletmek için tıklayın.
Bu, metni değiştirebileceğiniz ve menü öğesinin bağlanacağı URL’yi ekleyebileceğiniz bazı kontrolleri açar.
Varsayılan olarak, bağlantı ‘dofollow’ olacak ve aynı tarayıcı penceresinde açılacaktır. Bu ayarları ‘URL Bağlantısı’ bölümündeki onay kutularını kullanarak değiştirebilirsiniz.
Aşağıdaki resimde, yeni bir pencerede açılacak bir ‘nofollow’ bağlantısı oluşturuyoruz. Bu konuda daha fazla bilgi için lütfen yeni başlayanlar için nofollow bağlantıları kılavuzumuza bakın.
Menüye daha fazla öğe eklemek için ‘Yeni Öğe Ekle’ düğmesine tıklamanız yeterlidir.
Daha sonra yukarıda açıklanan aynı süreci izleyerek bu öğelerin her birini özelleştirebilirsiniz.
Sol taraftaki menüde yazı tipi boyutunu ve metin hizalamasını değiştiren ayarlar da vardır.
Menüdeki her öğe arasında görünecek bir bölücü bile oluşturabilirsiniz.
Bundan sonra, devam edin ve ‘Gelişmiş’ sekmesine geçin. Burada menünün renklerini, aralıklarını, tipografisini ve diğer gelişmiş seçenekleri değiştirebilirsiniz.
Siz değişiklik yaptıkça canlı önizleme otomatik olarak güncellenir, böylece tasarımınızda neyin iyi göründüğünü görmek için farklı ayarları deneyebilirsiniz.
SeedProd varsayılan olarak mobil ve masaüstü cihazlarda aynı menüyü gösterir. Ancak, mobil cihazlar genellikle masaüstü bilgisayarlara kıyasla çok daha küçük ekranlara sahiptir.
Bunu göz önünde bulundurarak, mobil cihazlarda göstermek için ayrı bir menü oluşturmak isteyebilirsiniz. Örneğin, mobil kullanıcıların yana doğru kaydırma yapmasına gerek kalmaması için dikey bir düzen kullanabilirsiniz. Ayrıca akıllı telefon ve tablet cihazlarda daha az bağlantı göstermek isteyebilirsiniz.
Mobil cihazlar için hazır bir menü oluşturmak için, yukarıda açıklanan aynı süreci izleyerek menüyü tasarlayın. Ardından, ‘Gelişmiş’ sekmesini seçin ve ‘Cihaz Görünürlüğü’ bölümünü genişletmek için tıklayın.
Artık ‘Masaüstünde Gizle’ kaydırıcısını açıp kapatabilirsiniz.
Artık SeedProd bu menüyü sadece mobil kullanıcılara gösterecek.
Özel menünüzün nasıl göründüğünden memnun olduğunuzda, yayınlama zamanı gelmiştir.
‘Kaydet’in yanındaki açılır oka tıklamanız ve ardından ‘Yayınla’yı seçmeniz yeterlidir.
Şimdi, WordPress blogunuzu ziyaret ederseniz, özel gezinme menüsünü çalışırken göreceksiniz.
Yöntem 3: WordPress’te Kod Kullanarak Özel Navigasyon Menüsü Oluşturma (Gelişmiş)
Bir sayfa oluşturucu eklentisi kurmak istemiyorsanız, kod kullanarak özel bir gezinme menüsü ekleyebilirsiniz. Genellikle temanızın functions.php dosyasına özel kod parçacıklarının nasıl ekleneceğine dair talimatlar içeren kılavuzlar bulabilirsiniz.
Ancak, kodunuzdaki küçük bir hata bile bir dizi yaygın WordPress hatasına neden olabileceğinden ve hatta sitenizi tamamen bozabileceğinden bu yöntemi önermiyoruz. Ayrıca WordPress temanızı güncellediğinizde özel kodu kaybedersiniz.
Bu yüzden WPCode kullanmanızı öneriyoruz. Herhangi bir çekirdek WordPress dosyasını düzenlemek zorunda kalmadan WordPress’e özel kod eklemenin en kolay ve en güvenli yoludur.
Not: WordPress sitenizi güvenle özelleştirmek için WPCode’u kullanabileceğiniz tonlarca farklı yol vardır. Yerleşik bir kod parçacıkları kitaplığına sahiptir ve PHP, JavaScript, CSS ve HTML dahil olmak üzere en önemli WordPress dillerinin tümünü destekler. Eklenti hakkında daha fazla bilgi için eksiksiz WPCode incelememize göz atın.
Yapmanız gereken ilk şey ücretsiz WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından WordPress panonuzda Kod Parçacıkları “ Parçacık Ekle bölümüne gidin.
Burada, sitenize ekleyebileceğiniz tüm hazır snippet’leri göreceksiniz. Bunlar arasında yorumları tamamen devre dışı bırakmanıza, WordPress’in genellikle desteklemediği dosya türlerini yüklemenize, ek sayfalarını devre dışı bırakmanıza ve çok daha fazlasına olanak tanıyan bir snippet bulunmaktadır.
Kendi snippet’inizi oluşturmak için farenizi ‘Özel Kodunuzu Ekleyin’ seçeneğinin üzerine getirin ve ardından ‘Snippet kullan’ seçeneğine tıklayın.
Başlamak için, özel kod parçacığı için bir başlık girin. Bu, kod parçacığını WordPress panonuzda tanımlamanıza yardımcı olacak herhangi bir şey olabilir.
Bundan sonra, ‘Kod Türü’ açılır menüsünü açın ve ‘PHP Snippet’i seçin.
Bunu yaptıktan sonra, aşağıdaki kod parçacığını kod düzenleyiciye yapıştırmanız yeterlidir:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Bu, temanıza ‘Özel Menüm’ adında yeni bir menü konumu ekleyecektir. Farklı bir ad kullanmak için kod parçacığını değiştirmeniz yeterlidir.
Temanıza birden fazla özel gezinti menüsü eklemek istiyorsanız, kod parçacığına fazladan bir satır eklemeniz yeterlidir.
Örneğin, burada temamıza ‘Özel Menüm’ ve ‘Ekstra Menü:’ adında iki yeni menü konumu ekliyoruz.
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );
Bundan sonra, ‘Ekleme’ seçeneklerine kaydırın. Zaten seçili değilse, WPCode’un snippet’i sitenizin tamamına eklemesi için ‘Otomatik Ekle’ yöntemini seçin.
Bundan sonra, ‘Konum’ açılır menüsünü açın ve ‘Her Yerde Çalıştır’a tıklayın.
Ardından, ekranın üst kısmına kaydırmaya ve ‘Etkin Değil’ geçişine tıklayarak ‘Etkin’ olarak değiştirmeye hazırsınız.
Son olarak, devam edin ve bu snippet’i canlı hale getirmek için ‘Kaydet’e tıklayın.
Bundan sonra, Görünüm ” Menüler bölümüne gidin ve ‘Görüntüleme konumu’ alanına bakın.
Şimdi yeni bir ‘Özel Menüm’ seçeneği görmelisiniz.
Şimdi devam edebilir ve yeni konuma bazı menü öğeleri ekleyebilirsiniz. Daha fazla bilgi için lütfen yeni başlayanlar için navigasyon menülerinin nasıl ekleneceğine ilişkin adım adım kılavuzumuza bakın.
Menünüzden memnun olduğunuzda, bir sonraki adım onu WordPress temanıza eklemektir.
Çoğu web sitesi navigasyon menüsünü doğrudan başlık bölümünün altında gösterir. Bu da menünün, site logosu veya başlığıyla birlikte ziyaretçilerin gördüğü ilk şeylerden biri olduğu anlamına gelir.
Temanızın şablon dosyasına bazı kodlar ekleyerek özel gezinme menüsünü herhangi bir konuma ekleyebilirsiniz.
WordPress panonuzda Görünüm ” Tema Dosyası Düzenleyicisi bölümüne gidin.
Sağ taraftaki menüde, menüyü eklemek istediğiniz şablonu seçin. Örneğin, özel navigasyon menüsünü web sitenizin üstbilgisinde göstermek istiyorsanız, genellikle header.php dosyasını seçersiniz.
Doğru şablon dosyasını bulma konusunda yardım almak için lütfen WordPress temanızda hangi dosyaların düzenleneceğini bulma kılavuzumuza bakın.
Dosyayı seçtikten sonra, bir wp_nav_menu işlevi eklemeniz ve özel menünüzün adını belirtmeniz gerekir.
Örneğin, aşağıdaki kod parçacığında, temanın üstbilgisine ‘Özel Menüm’ ekliyoruz:
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );
Kodu ekledikten sonra, değişikliklerinizi kaydetmek için ‘Dosyayı Güncelle’ düğmesine tıklayın.
Şimdi, sitenizi ziyaret ederseniz, özel menüyü çalışırken göreceksiniz.
Varsayılan olarak, menünüz düz bir madde işaretli liste olarak görünecektir.
Sitenize özel CSS kodu ekleyerek özel navigasyon menüsünü WordPress temanıza veya şirket markanıza daha iyi uyacak şekilde şekillendirebilirsiniz.
Bunu yapmak için Görünüm ” Özelleştir‘e gidin.
WordPress tema özelleştiricisinde‘Ek CSS’ye tıklayın.
Bu, bazı CSS’leri yazabileceğiniz küçük bir kod düzenleyici açar.
Artık tema şablonunuza eklediğiniz CSS sınıfını kullanarak menünüzü şekillendirebilirsiniz. Örneğimizde bu sınıf .custom_menu_class‘tır.
Aşağıdaki kodda, kenar boşlukları ve dolgu ekliyoruz, metin rengini siyah olarak ayarlıyoruz ve menü öğelerini yatay bir düzende düzenliyoruz:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}
WordPress özelleştirici otomatik olarak güncellenecektir.
Şimdi menünün yeni stille nasıl görüneceğini gösterecektir.
Menünün nasıl göründüğünden memnunsanız, değişikliklerinizi canlı hale getirmek için ‘Yayınla’ya tıklayın.
Daha fazla bilgi için lütfen WordPress gezinti menülerinin nasıl şekillendirileceğine ilişkin kılavuzumuza bakın.
Uzman Kılavuzları: WordPress Navigasyon Menüleriyle Daha Fazlasını Yapın
WordPress ile her türlü yararlı ve ilgi çekici menüyü oluşturabilirsiniz. Bunu akılda tutarak, navigasyon menülerinizden daha da fazlasını elde etmenize yardımcı olacak bazı uzman kılavuzlarını burada bulabilirsiniz:
- WordPress’te Gezinti Menülerine Resim Simgeleri Ekleme
- WordPress’te Menülere Koşullu Mantık Nasıl Eklenir (Adım Adım)
- WordPress Temalarınıza Menü Açıklamaları Nasıl Eklenir?
- WordPress’te Tam Ekran Duyarlı Menü Nasıl Eklenir
- WordPress Sitenize Mega Menü Nasıl Eklenir (Adım Adım)
Bu nihai kılavuzun WordPress’te özel bir gezinme menüsünün nasıl ekleneceğini öğrenmenize yardımcı olduğunu umuyoruz. WordPress başlık menünüze nasıl düğme ekleyeceğiniz veya WordPress‘ te bir menü öğesini nasıl vurgulayacağınız hakkındaki kılavuzlarımızı da görmek isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Imran
I have a custom header built for wordpress when had menu items hardcoded, How can i use the wordpress menu in the header instead of the hardcoded menu ?
cheryl
I am fairly new to wordpress however I would like to edit a custom menu that we have created as something appears wrong within the menu.
How do i do this?
Manu
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain
Helpful article. I am a WordPress user and this tips will help me to add custom navigation menus. Thanks for sharing.
Daniel Keith
Hi there,
Great tutorial. How can I apply CSS to this custom menu?
Though this is a great way to add multiple menus but without proper CSS the website look odd.
Zaheer Abbas
I m creating my word press theme but menu and widget is not showing in admin panel ???
is it built in features in word press or i have to create menus and widgets with code plz guide
Tabitha
How can I make my drop down menu into columns? My current drop down is too long.
Aakash Salunke
I’m little bit advanced user. My theme supports only one menu. But I want to add one more menu. I have made it but how can I add?
WPBeginner Support
First you will need to register the menu location, then you will need to edit your theme files to display your navigation menu.
Yönetici
bobit
its worked, thanks for the great post
Aijaz Ansari
Awsome, tutorial, it really helps a novice like me.
thanks
Victoria
Thanks for the article!!! I created my new menu.
I have a problem though.
My website has a fixed width, and when I resize the window everything stays in place, exept for the new menu. Min-width is not an option because it’s not exactly the behavior I want.
How can I make it behave the same way as the rest of the contents of the page?
Thanks!
Joey
THANKS! I was looking a long time for this, never thought it was so simple.
Cory
i have a crazy old theme that didnt support WP 3.0+ menus. This tutorial was so easy. Took me 3 minutes to bring it a little more up to date. thanks so much.
Jacques Goudreau
Thanks for the tip! Great tut!
Emma
Where do you even go to make these changes? I can’t see any of those options under the Theme or Theme Options tabs.
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
Editorial Staff
Most themes do support this. Look at Appearance > Menus. This article is for theme designers who want to add this feature in their themes to allow users to add menus from the backend.
Yönetici
Zoe
I’ve been trying to add a custom class to a singular custom url (to change the color of just one url) in the Top Nav Menus section, but it just adds my class as an extension of the existing class in the output source code and nothing happens.
Here’s my css code and the source code that is output on my site:
.myCustomClass { color: #FFFF00; }
A one-off colored link
Any suggestions on how to get this to work?
Editorial Staff
Yes add it like color: #ffff00 !important; in that class. This should do the trick.
Yönetici
Jeremy Johnson
I was able to implement these modifications and the custom menu works. However, the css in my chosen theme doesn’t seem to support sub-menus. The submenu item is always visible, mousing over the parent item does nothing, and the parent menu item is as wide as the wider child item which pushes the other menu items farther to the right than they should be. Any suggestions on making the sub-menu act dynamically? I’m fairly new to CSS.
Editorial Staff
The best place to start would be to take the default Twenty Eleven theme. Use the navigation CSS from there, and start modifying.
Yönetici
Cedric
Still looking for a solution for this.
shaunling
This is just great!
digitfox
Yeah! its a nice tutorial for me! I am very new to WP! Thanks
PauloNeves
I need help.
Follow all steps, but in Apparance Panel the option menu not enable.
When select other theme working.
How do enable option menu?
Thanks.
Paulo Neves
wpbeginner
@PauloNeves You have to add this line in your theme’s functions.php file: add_theme_support( ‘menus’ );
Brad
Thanks for this! Worked awesomely for me and helped my client a lot! – aptdesign
eeebasic
That is very helpful me although wordprees 3.3 version released few days ago.
citydan
I have followed the instructions and this post and the post here (https://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), and figured out how to get my CSS to make the menu appear correctly, but the child items (sub menu items) are not appearing. I have them set up correctly in the menus editor, but on the site they do not show. They are not hidden by CSS because they are not there in the source code of the page.
Any ideas why my menu sub-items are not showing?
GourabMalla
Hi,
I have added the custom menu in top navigation but want to know how can I active the “Current Page Class”.
I’m using WordPress 3.2
Thanks
Gourab
DanFlynnDesign
Thank you! Love how this is all dynamic so the client can edit if needed, plus able to state which is the current page and apply hover effect! EXACTLY what I was looking for!
asharperrazor
I have tried this many times. I have an old wordpress theme. So old I’m not even sure what version of wrodpress it was written for. Anyway, I can get the functions part to work. I can save the correct menu. I can put the code into other parts of my website, say the footer, although it displays as a hierarchy list and not horizontally.
Won’t display in the top nav menu. Do I need a new theme or is it possible to edit my current theme to allow the new menu function?
Thanks in advance. The website is http://www.asharperrazor.com
JamesGeorge
I implemented this with NO problems-thank you! I took the “nav menu” code and put it in the div where my client’s theme was calling the list of pages. I basically replaced it with your code from above and uploaded it, and the css kept it in the same style. It looks great and functions perfectly. AWESOME!
ÁlvaroBenavides
I really need help implementing the CSS of the classes, so please notify when u finish!
Bec
Great post – thank you!
I have implemented as above and my menu items are showing on site only problem is that each page is empty?!
any ideas?
Editorial Staff
Sounds like a PHP error. Please validate your PHP to make sure there is no error.
Yönetici
Joseph McCullough
Quick and dirty – the way I like my code snippets. Thanks a bunch.
Paul
I have created custom navigation menus a couple of times. What is weird is that after I create and save them, they appear for a while and then the navigation bar returns to 2 tabs only as if the settings are automatically overwritten. On sites with the same template were I never created a custom bar they display correctly.
Any ideas?
Editorial Staff
Nope, no clue why it is doing that.
Yönetici
Narendra Choudhary
You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
Reply
Ram
I have a question on nav menu,
is there any way to add the image to the list of navigation menus..
Thanks,
Ram
Editorial Staff
You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
Yönetici
Ram
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
Thanks,
Ram
Editorial Staff
Yes it is possible to add different images with the custom menu. The one you are using is not the menu that we are talking about in this article.
Julie @ Inspired to Write
Can you add code to make it look more presentable (fonts, buttons, size, etc)? If so, can you give me an example and where to put this code? Thanks!
Editorial Staff
That is a CSS related question. You will have to add the font size in the appropriate classes in the CSS file. We will be doing a writeup on the CSS styles soon.
Yönetici
Chris
Question about the menu handling.
I have a menu that is right aligned, so the menu items show up in reverse order.
Is there a way to sort the menu_order in REVERSE?
so: sort_column’ => ‘menu_order’ would have something added to reverse the order.
Thanks!
Editorial Staff
Just because they are right aligned, shouldn’t make it appear in reverse order. To fix that, you need to change your CSS rather than reversing the hook. Make a container div that is aligned right, and then make the list tags float left.
Yönetici
Julie
Have followed instructions but after creating menus and adding appropriate categories to use, I can’t see them in my nav bar – any ideas what I have done wrong?
Editorial Staff
Have you pasted the codes in your header.php or wherever that menu should appear?
Yönetici
dan
You also need to add this to your functions.php file in order for you to use the menus
register_nav_menus( array(
‘primary’ => __( ‘Main Navigation’, ‘twentyten’ ),
) );
Editorial Staff
Certainly a thing that you should have when releasing free themes, but for custom themes it all depends on what you need. Sometimes you don’t have to register locations.
Yönetici
errr
i’m soooo not following … could u be more clear where i would plug this code (add_theme_support( ‘menus’ );) into the functions.php file?
i’m totally lost
Editorial Staff
Somewhere within the php tags. If you do not have PHP experience, we recommend you hire a professional.
Yönetici
BanyanTree
If you are going to write articles for newbies, it follows you should answer simple questions. Otherwise, just pay for ads to push your business and save the pretense.
wpbeginner
@BanyanTree Adding codes to functions.php file is not that hard. You paste it within the php tags. We have written an articles like this:https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ But its just impossible to link to that one article from all of our articles. When someone asks you how do I change the background in CSS and you tell them that you add background: #000 or another hexcode in the CSS property thats help enough.Now if they ask where in the CSS file I paste that, then that is something you need to know before hands. This site is not a PHP for Dummies site or CSS for dummies site. We do our best to help as much people as possible for FREE.
BanyanTree
@wpbeginner@BanyanTree You don’t need to link to articles, no one asked for that. Three words answers his question; “at the end,” which is easier to type than a snide remark. Keep in mind, you named your site; “wpbeginner,” and if that’s the audience you seek, cater accordingly.
wpbeginner
@f1mktsol Yes and the site has grown beyond the audience we initially started with. This site has evolved. That is why we have categories… The word “beginner” is being used on a relative scale.
We have articles for Very Newbies who are just users in our Beginners Guide Category… We also have articles in our WordPress plugins category that are catered to that audience.If you are in our WP Themes category, then the articles are written for beginning theme developers. They are beginners in the developer area. Same with the tutorials.
Hope that explains it.
f1mktsol
@wpbeginner If you’ve outgrown your name, you should change it to suit the audience you seem to prefer. Consider consulting a professional.
Skubeedoo
I added add_theme_support( ‘menus’ );
and saw no option in the admin panel [where do i look?] I’m using intrepidity theme. I’m a noob, so it might be right in front of me and don’t know the difference. I have a website that has a WP inside it and want to be able to navigate out of WP and back to my main URL. All I need is a “Home” nav link.
Thanks in advance.
Editorial Staff
It should show under Appearance Tab.
Yönetici
ianarosh
friend you have an awesome site and I am glad i’ve found it!
I was killing my head to figure how to add the costum menu and it was easy after i’ve seen this! Simply amazing.
A sugestion ever pondered in making posts about blog/server security? (not sure if you’ve had already need to explore more :O)
Best regards and keep the good work mate!
Editorial Staff
Do a search, we already have a post about that.
Yönetici
Charles
Can any of you tell me how to add support for multiple menus in the functions php file. I want to include two set’s of menus
Editorial Staff
You don’t need to have two set of functions.php… Just call the main function. Create multiple menus using the user interface in wp-admin. Then you would have to call the menus in the php code.
Yönetici
Jamie
Just to let you know but the following:
“add_theme_support( ‘nav-menus’ );”
Has changed in the final release to:
“add_theme_support( ‘menus’ );”
Thanks!
Peter Luit
@Jamie: Thanks for that latest remark!
Editorial Staff
Thanks Jamie, Post fixed
Yönetici
Jacob
Great. Just what I was looking for. How do you add the menu slug to the function?
Editorial Staff
‘menu’ => ‘Project Nav’ like this <<
Yönetici
Chris Creed
Thanks for this – I’m currently playing around with the new menu system – it’s a great additional feature that’s going to make things so much easier. I develop themes and get quite a few support requests from people wanting to create custom navigation sections on their site – the new menus should hopefully help to simply things a lot (especially for people with little WordPress experience).
Gopal Bhattacharjee
I am also testing WordPress 3.0 Beta, now I can play arround with menu…Thanks!
Angie
I am wondering how to remove HOME from my nav menu using WP 3.0 beta. Do I edit the wp_nav_menu function or is there some other way?
If I edit the function, can you provide instruction?
Editorial Staff
You can simply click Remove…just like any other navigation link.
Yönetici
Kevin
Its a pity there’s no way to add the “home” page to the menu from within the menu builder. This is a major flaw.
Editorial Staff
Why not? You can create a custom navigation link called Home and add your homepage URL to it.
Yönetici
Noor
I am also testing WordPress 3.0 Beta and I found few bad things in Menus…e.g it is inconsistent and hope till the final release it will become consistent
michelle
nice tutorial! thanks for the share!
Mani Viswanathan
Good Tutorials first up! will be useful while I upgrade to 3.0